Jquery attr("checked") 返回checked或undefined 获取选中失效


Posted in Javascript onOctober 10, 2013

假设我们现在需要这样的场景:页面上有一个checkbox,我们期望通过Jquery来获得它是否选中,或者通过Jquery来让它被选中。
在JQ1.6之前的版本,我们会这样写我们的代码:

<input type='checkbox' id='cb'/> 
<script> 
//获取是否选中 
var isChecked = $('#cb').attr('checked'); //设置选中 
$('#cb').attr('checked',true); 
</script>

这样写在JQ1.6之前完全没问题,可是当我们升级JQ1.6到更高的版本时,问题就来了,此时我们会发现:
$('#cb').attr('checked'); 返回的是checked或者是undefined,不是原来的true和false了。
并且checked属性在页面初始化的时候已经初始化好了,不会随着状态的改变而改变。所以如果checkbox一开始是选中的,那么返回的是checked,如果一开始没被选中,则返回的是undefined。

解决的方法是:

<input type='checkbox' id='cb'/> 
<script> 
//获取是否选中 
var isChecked = $('#cb').prop('checked'); 
//或 
var isChecked = $('#cb').is(":checked"); 
//设置选中 
$('#cb').prop('checked',true); 
</script>

分析了其中的原因,可以这样理解:

它将“属性”与“特性”做了区别,属性指的是“name,id”等等,特性指的是“selectedIndex, tagName, nodeName”等等。
JQ1.6之后,可以通过attr方法去获得属性,通过prop方法去获得特性

$("#cb").attr("tagName"); //undefined 
$("#cb").prop("tagName"); //INPUT
Javascript 相关文章推荐
js静态作用域的功能。
Dec 25 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
Nov 26 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
JavaScript驾驭网页-CSS与DOM
Mar 24 Javascript
最基础的vue.js双向绑定操作
Aug 23 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 #Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 #Javascript
js切换光标示例代码
Oct 10 #Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 #Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 #Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 #Javascript
javascript中的document.open()方法使用介绍
Oct 09 #Javascript
You might like
php代码优化及php相关问题总结
2006/10/09 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
让FireFox支持innerText的实现代码
2009/12/01 Javascript
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
js实现简单的验证码
2015/12/25 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
js实现右键菜单功能
2016/11/28 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
Python类定义和类继承详解
2015/05/08 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
教师求职信
2014/06/17 职场文书
小学科学教学计划
2015/01/21 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
vue+echarts实现多条折线图
2022/03/21 Vue.js