解决checkbox的attr(checked)一直为undefined问题


Posted in Javascript onJune 16, 2014

最近本?潘坑ο钅靠?⑿枨螅?枰?龈鲆桓鋈?〉?heckbox功能。

哎呀吗~~这不是很简单的事情么,一个总的checkbox,N多个子checkbox,总的checkbox一旦选中,子checkbox全部选中,总的一旦不选中,子的也都不选中。

拿到这个小需求,本?潘恳徽笄韵玻?嗝醇虻サ墓δ馨。?K,两分钟完事~~~

时间一分一秒的过去,本?潘磕谛谋继诘牟菰?穆矶??右恢敝鸾ピ黾拥搅饲?蛑?~~

这尼玛怎么回事?
alert($("#checkbox_all").attr("checked"));
一直为undefined?

纳尼???

为啥会这样??浏览器你傻了吗?然后果断换浏览器测试,从chrome到IE,从IE到火狐。结果都是这样 -_-||

难道是jquery又做改进了????

经过本?潘坑霉???毒岛透咔謇厣涞缱酉晕⒕档牟榭矗?沼谡业搅硕四摺!!!

原来,在jquery1.6版本便对此做出了修改:

【checked属性在页面初始化的时候已经初始化好了,不会随着状态的改变而改变。

也就是说如果checkbox在页面加载完毕是选中的,那么返回的永远都是checked(我的一开始就是没选中)

如果一开始没被选中,则返回的永远是undefined !】

既然jquery对此做出了修改,那肯定也就是有相应的更好的解决方法:

.prop()便是解决这个问题的利器!

具体用法如下:

alert($("#checkbox_all").prop("checked"));
此时就会变成true或者false啦~~

于是乎,本?潘康拇?刖透某闪巳缦拢

#check_all 为全选的总checkbox,#check_children为子checkbox

$("#check_all").change(function(){ 
$('.check_children').prop("checked",this.checked); 
});

或者:
$("#check_all").change(function(){ 
var is_checked = $(this).prop("checked"); 
$('.check_children').prop("checked",is_checked); 
});

不过,我还是很喜欢用第一种方法的啦,代码越少越好嘛~~write less ,do more !

很方便的解决了全选的问题呀~~~

Javascript 相关文章推荐
js实现页面跳转重定向的几种方式
May 29 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
Vue.directive使用注意(小结)
Aug 31 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 Javascript
ES6中Promise的使用方法实例总结
Feb 18 Javascript
JS实现百度搜索框
Feb 25 Javascript
JavaScript 与 TypeScript之间的联系
Nov 27 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 #Javascript
javascript操纵OGNL标签示例代码
Jun 16 #Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 #Javascript
select多选 multiple的使用示例
Jun 16 #Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 #Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 #Javascript
Js实现滚动变色的文字效果
Jun 16 #Javascript
You might like
php过滤危险html代码
2008/08/18 PHP
PHP关联数组的10个操作技巧
2013/01/21 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
php实现简单洗牌算法
2013/06/18 PHP
php的sso单点登录实现方法
2015/01/08 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
JS实现图片切换效果
2018/11/17 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
Python文件处理
2016/02/29 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
大学生违纪检讨书范文
2015/05/07 职场文书
企业法律事务工作总结
2015/08/11 职场文书
安全教育的主题班会
2015/08/13 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android