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 相关文章推荐
Use Word to Search for Files
Jun 15 Javascript
jquery 问答知识整理
Feb 11 Javascript
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
javascript列表框操作函数集合汇总
Nov 28 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
JavaScript自定义超时API代码实例
Apr 30 Javascript
JS highcharts动态柱状图原理及实现
Oct 16 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
php调用Google translate_tts api实现代码
2013/08/07 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
document.documentElement的一些使用技巧
2013/04/18 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
javascript操作符&quot;!~&quot;详解
2015/02/10 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
2020/04/08 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python网络编程之文件下载实例分析
2015/05/20 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
介绍一下Make? 为什么使用make
2013/12/08 面试题
早餐连锁店计划书
2014/01/08 职场文书
幼儿园春游活动方案
2014/01/19 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
小学少先队活动总结
2015/05/08 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
go web 预防跨站脚本的实现方式
2021/06/11 Golang
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python