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 相关文章推荐
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
原生JS实现的轮播图功能详解
Aug 06 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 Javascript
基于canvasJS在PHP中制作动态图表
May 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
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
php disk_free_space 返回目录可用空间
2010/05/10 PHP
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
php对称加密算法示例
2014/05/07 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
document.getElementById介绍
2011/09/13 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
python打开文件并获取文件相关属性的方法
2015/04/23 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
Python生成器generator原理及用法解析
2020/07/20 Python
python开发一款翻译工具
2020/10/10 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
html5中valid、invalid、required的定义
2014/02/21 HTML / CSS
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
全球性的在线购物网站:Zapals
2017/03/22 全球购物
毕业学生推荐信
2013/12/01 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript