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 双色表格实现代码
Dec 08 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
纯JS代码实现气泡效果
May 04 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
JS实现div模块的截图并下载功能
Oct 17 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
vue 权限认证token的实现方法
Jul 17 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 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短网址和数字之间相互转换的方法
2015/03/13 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
详解python中requirements.txt的一切
2017/03/03 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
python中实现字符串翻转的方法
2018/07/11 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
python excel转换csv代码实例
2019/08/26 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
优秀员工评语
2014/02/10 职场文书
企业党员一句话承诺
2014/05/30 职场文书
画展邀请函
2015/01/31 职场文书
党小组鉴定意见
2015/06/02 职场文书
小学生节约用水倡议书
2019/08/12 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers