解决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 31 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
May 06 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
Apr 17 Javascript
JavaScript中exec函数用法实例分析
Jun 08 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
详解tween.js 中文使用指南
Jan 05 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
PHP中ADODB类详解
2008/03/25 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
php实现读取超大文件的方法
2014/07/28 PHP
php微信开发之谷歌测距
2018/06/14 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
JS中的==运算: [''] == false —>true
2016/07/24 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
jQuery实现增删改查
2020/12/22 jQuery
python脚本实现查找webshell的方法
2014/07/31 Python
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
Django视图扩展类知识点详解
2019/10/25 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
python实现连连看游戏
2020/02/14 Python
python爬虫要用到的库总结
2020/07/28 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
维德科技C#面试题笔试题
2015/12/09 面试题
服务中心夜班服务员岗位职责
2013/11/27 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
答谢酒会主持词
2015/07/02 职场文书
婚宴新娘致辞
2015/07/28 职场文书
会计主管竞聘书
2015/09/15 职场文书