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 07 Javascript
JSON JQUERY模板实现说明
Jul 03 Javascript
js转义字符介绍
Nov 05 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
js实现人才网站职位选择功能的方法
Aug 14 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 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构造函数与析构函数
2016/04/23 PHP
jQuery live
2009/05/15 Javascript
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
python八皇后问题的解决方法
2018/09/27 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
Python中的类与类型示例详解
2019/07/10 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
2014年上半年工作自我评价
2014/01/18 职场文书
幼儿园评语大全
2014/04/17 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
见习报告格式范文
2014/11/08 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
关于JavaScript轮播图的实现
2021/11/20 Javascript