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 相关文章推荐
Jquery cookie操作代码
Mar 14 Javascript
javascript中的注释使用与注意事项小结
Sep 20 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
BootStrap selectpicker
Jun 20 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 Javascript
Google 地图事件实例讲解
Aug 06 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
JavaScript设计模式之原型模式详情
Jun 21 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中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
PHP中的日期加减方法示例
2014/08/21 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
python中使用mysql数据库详细介绍
2015/03/27 Python
Python字符串处理之count()方法的使用
2015/05/18 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
儿童学习python的一些小技巧
2018/05/27 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
外贸业务员的岗位职责
2013/11/23 职场文书
会计职业生涯规划范文
2014/01/04 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL