解决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 相关文章推荐
JavaScript 保存数组到Cookie的代码
Apr 14 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
react MPA 多页配置详解
Oct 18 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
解决vue admin element noCache设置无效的问题
Nov 12 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
vue实现下拉菜单树
Oct 22 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
MySQL数据源表结构图示
2008/06/05 PHP
PHP Curl多线程原理实例详解
2013/11/06 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
PHP目录操作实例总结
2016/09/27 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
学习YUI.Ext第五日--做拖放Darg&Drop
2007/03/10 Javascript
Javascript 跨域访问解决方案
2009/02/14 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
JS实现随机点名器
2020/04/12 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
Python的Django框架中settings文件的部署建议
2015/05/30 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
python 发送json数据操作实例分析
2019/10/15 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
老师自我鉴定范文
2013/12/25 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
项目合作意向书范本
2014/04/01 职场文书
求职意向书
2014/04/01 职场文书
软件售后服务方案
2014/05/29 职场文书
人力资源管理求职信
2014/08/07 职场文书
综合实践活动报告
2015/02/05 职场文书
男人帮观后感
2015/06/18 职场文书
中学生运动会广播稿
2015/08/19 职场文书
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫