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 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 Javascript
用JavaScript做简易的购物车的代码示例
Oct 20 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 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
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
详解Vue.directive 自定义指令
2019/03/27 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
2020/08/25 Javascript
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
python 实现return返回多个值
2019/11/19 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
会计专业自荐信
2013/12/02 职场文书
党员服务承诺书
2014/05/28 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
音乐教师个人总结
2015/02/06 职场文书
Go Plugins插件的实现方式
2021/08/07 Golang