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 parseInt字符转化为数字函数使用小结
Nov 05 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 Javascript
VsCode里的Vue模板的实现
Aug 12 Javascript
vue项目实现分页效果
Mar 24 Vue.js
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
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
PHP常用的三种设计模式汇总
2016/08/28 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
vue实现图片上传预览功能
2019/12/23 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
分享几道你可能遇到的python面试题
2017/07/24 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
实习单位推荐信范文
2013/11/27 职场文书
《日月潭》教学反思
2014/02/28 职场文书
领导干部作风建设总结
2014/10/23 职场文书
七一慰问简报
2015/07/20 职场文书
vue首次渲染全过程
2021/04/21 Vue.js
Python实现制作销售数据可视化看板详解
2021/11/27 Python
Python first-order-model实现让照片动起来
2022/06/25 Python