解决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 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
jQuery对象和DOM对象使用说明
Jun 25 Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 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
基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换)
2013/06/25 PHP
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
JavaScript中Function详解
2015/02/27 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
在vue中获取dom元素内容的方法
2017/07/10 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
vuejs实现标签选项卡动态更改css样式的方法
2018/05/31 Javascript
js数组去重的方法总结
2019/01/18 Javascript
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
详解Python各大聊天系统的屏蔽脏话功能原理
2016/12/01 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
对python的文件内注释 help注释方法
2018/05/23 Python
python 将md5转为16字节的方法
2018/05/29 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
python的faker库用法
2019/11/28 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
初一科学教学反思
2014/01/27 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
党风廉设责任书
2014/04/16 职场文书
祖国在我心中的演讲稿
2014/05/04 职场文书
市场调查策划方案
2014/06/10 职场文书
医学专业自荐信
2014/06/14 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
十八大观后感
2015/06/12 职场文书
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS