解决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脚本性能优化注意事项
Nov 18 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
jQuery控制TR显示隐藏的几种方法
Jun 18 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
node.js文件上传重命名以及移动位置的示例代码
Jan 19 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
Vue select 绑定动态变量的实例讲解
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
ThinkPHP模型详解
2015/07/27 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
php中数组最简单的使用方法
2020/12/27 PHP
Javascript - HTML的request类
2007/01/09 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
Python 文件重命名工具代码
2009/07/26 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
详解django中Template语言
2020/02/22 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
有针对性的求职自荐信
2013/11/14 职场文书
团委竞选演讲稿
2014/04/24 职场文书
母亲节演讲稿
2014/05/27 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技