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之锁定表格栏位
Jun 29 Javascript
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
d3绘制基本的柱形图的实现代码
Dec 12 Javascript
vue - vue.config.js中devServer配置方式
Oct 30 Javascript
详解jQuery中的prop()使用方法
Jan 05 jQuery
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 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创建桌面快捷方式的实例代码
2014/02/17 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
javascript CSS画图之基础篇
2009/07/29 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
快速入门Vue
2016/12/19 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
python爬虫容易学吗
2020/06/02 Python
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
几个Linux面试题笔试题
2012/12/01 面试题
股份合作协议书范本
2014/04/14 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis