解决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 相关文章推荐
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
chrome原生方法之数组
Nov 30 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 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
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
桌面中心(二)数据库写入
2006/10/09 PHP
PHP strtotime函数详解
2009/12/18 PHP
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
PHP中使用smarty生成静态文件的例子
2014/04/24 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
php内嵌函数用法实例
2015/03/20 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
php表单处理操作
2017/11/16 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
Js动态创建div
2008/09/25 Javascript
JavaScript 加号(+)运算符号
2009/12/06 Javascript
限制文本框输入N个字符的js代码
2010/05/13 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
vue cli 全面解析
2018/02/28 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
Python中文竖排显示的方法
2015/07/28 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
基于Django统计博客文章阅读量
2019/10/29 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
计算机维护专业推荐信
2014/02/27 职场文书
销售会计岗位职责
2014/03/15 职场文书
人力资源本科毕业生求职信
2014/06/04 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
加强作风建设心得体会
2014/10/22 职场文书