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 RegExp方法获取地址栏参数(面向对象)
Mar 10 Javascript
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 Javascript
js获取图片宽高的方法
Nov 25 Javascript
javascript入门之数组[新手必看]
Nov 21 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
vue 设置路由的登录权限的方法
Jul 03 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 Javascript
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 09 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创建PDF中文文档
2006/10/09 PHP
php中判断数组是一维,二维,还是多维的解决方法
2013/05/04 PHP
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
网上抓的一个特效
2007/05/11 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
Python中的默认参数实例分析
2018/01/29 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
Python生成器常见问题及解决方案
2020/03/21 Python
python实现交并比IOU教程
2020/04/16 Python
django使用channels实现通信的示例
2020/10/19 Python
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
大学生职业规划前言模板
2013/12/27 职场文书
社会实践评语
2014/04/28 职场文书
支部组织生活会方案
2014/06/10 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
vue项目支付功能代码详解
2022/02/18 Vue.js