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 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
Nov 14 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
vue中锚点的三种方法
Jul 06 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 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
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
php 常用的系统函数
2017/02/07 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
JS定时器实例
2013/04/17 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
几种tab切换详解
2017/02/03 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
jupyter notebook 重装教程
2020/04/16 Python
python获取整个网页源码的方法
2020/08/03 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
EJB实例的生命周期
2016/10/28 面试题
日语求职信范文
2013/12/17 职场文书
车辆年检委托书范本
2014/10/14 职场文书
停电通知范文
2015/04/16 职场文书
行政诉讼答辩状
2015/05/21 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript
深入理解Pytorch微调torchvision模型
2021/11/11 Python
Javascript webpack动态import
2022/04/19 Javascript
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python