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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐share.js
Dec 23 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
浅谈JavaScript 覆盖原型以及更改原型
Aug 31 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
layui输入框只允许输入中文且判断长度的例子
Sep 18 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
Javascript原生ajax请求代码实例
Feb 20 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 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中的foreach问题
2013/06/30 PHP
PHP循环结构实例讲解
2014/02/10 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
php实现session共享的实例方法
2019/09/19 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
jQuery垂直多级导航菜单代码分享
2015/08/18 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
django Serializer序列化使用方法详解
2018/10/16 Python
python实现自动化上线脚本的示例
2019/07/01 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
如何利用python正则表达式匹配版本信息
2020/12/09 Python
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
毕业实习评语
2014/02/10 职场文书
学校教师读书活动总结
2014/07/08 职场文书
数学教育专业求职信
2014/07/22 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
授权委托书
2014/09/17 职场文书
关于长城的导游词
2015/01/30 职场文书
六一活动主持词
2015/06/30 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书