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 相关文章推荐
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
jQuery获取radio选中项的值实例
Jun 18 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
Layui实现主窗口和Iframe层参数传递
Nov 14 Javascript
React更新渲染原理深入分析
Dec 24 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抓取页面的几种方法详解
2013/06/17 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
PHP内置加密函数详解
2016/11/20 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
2013/01/11 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
联强国际笔试题面试题
2013/07/10 面试题
工业设计毕业生自荐信
2014/04/13 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
高三毕业评语
2014/12/31 职场文书
单身申明具结书
2015/02/26 职场文书
小学教师岗位职责
2015/04/02 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
2016年安全月活动总结
2016/04/06 职场文书