解决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 相关文章推荐
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
Sep 12 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
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
全国FM电台频率大全 - 25 云南省
2020/03/11 无线电
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
JQuery优缺点分析说明
2011/04/10 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
为什么要用EJB
2014/04/17 面试题
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
质检的岗位职责
2013/11/17 职场文书
安全生产管理责任书
2014/04/16 职场文书
财务内勤岗位职责
2014/04/17 职场文书
献爱心标语
2014/06/21 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
数学教师求职信范文
2015/03/20 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL