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 相关文章推荐
几行代码轻松搞定jquery实现flash8类似的连接效果
May 03 Javascript
JQuery 表格操作(交替显示、拖动表格行、选择行等)
Jul 29 Javascript
前端开发必须知道的JS之原型和继承
Jul 06 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
微信小程序实现批量倒计时功能
Nov 01 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 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 allow_url_include的应用和解释
2010/04/22 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
java必学必会之static关键字
2015/12/03 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
简单实现js鼠标跟随效果
2020/08/02 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
Python采用Django制作简易的知乎日报API
2016/08/03 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
PyTorch中的C++扩展实现
2020/04/02 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
保护环境的建议书
2014/03/12 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
自查自纠工作总结
2014/10/15 职场文书
给上级领导的感谢信
2015/01/22 职场文书
寒假致家长的一封信
2015/10/10 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
详解Python内置模块Collections
2022/03/22 Python