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判断浏览器类型的方法
Feb 10 Javascript
js实现的页面矩阵图形变换特效
Jan 26 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
快速使用Bootstrap搭建传送带
May 06 Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 Javascript
超全面的JavaScript开发规范(推荐)
Jan 21 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
修改node.js默认的npm安装目录实例
May 15 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 Javascript
layui的数据表格+springmvc实现搜索功能的例子
Sep 28 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
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
php中autoload的用法总结
2013/11/08 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
js查找节点的方法小结
2015/01/13 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
domReady的实现案例
2016/11/23 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
python方向键控制上下左右代码
2018/01/20 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
秋季婚礼证婚词
2014/01/11 职场文书
小学生新学期寄语
2014/01/19 职场文书
关于迟到的检讨书
2014/01/26 职场文书
教师开学感言
2014/02/14 职场文书
小学生运动会报道稿
2014/09/12 职场文书
客户付款通知书
2015/04/23 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS