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中数组Array的操作方法
May 09 Javascript
js网页右下角提示框实例
Oct 14 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
分享jQuery网页元素拖拽插件
Dec 01 Javascript
JS面试题---关于算法台阶的问题
Jul 26 Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 Javascript
浅析Node.js:DNS模块的使用
Nov 23 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
JS控制下拉列表左右选择实例代码
May 08 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
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
JS往数组中添加项性能分析
2015/02/25 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
python实现跨excel的工作表sheet之间的复制方法
2018/05/03 Python
Python实现全排列的打印
2018/08/18 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
Python和Bash结合在一起的方法
2020/11/13 Python
以下的初始化有什么区别
2013/12/16 面试题
车辆工程专业求职信
2014/04/28 职场文书
房展策划方案
2014/06/07 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
企业党建工作总结2015
2015/05/26 职场文书
功夫熊猫观后感
2015/06/10 职场文书
大学生实习证明
2015/06/16 职场文书
大学同学聚会感言
2015/07/30 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript