解决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的几种方法小结
Apr 25 Javascript
JavaScript对象和字串之间的转换实例探讨
Apr 21 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
JavaScript函数获取事件源的小例子
May 14 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
JS实现websocket长轮询实时消息提示的效果
Oct 10 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
Vuex实现数据增加和删除功能
Nov 11 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 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
MySQL修改密码方法总结
2008/03/25 PHP
PHP常用函数小技巧
2008/09/11 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
python web框架中实现原生分页
2019/09/08 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
2014年语文教研组工作总结
2014/12/06 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
党支部工作总结2015
2015/04/01 职场文书
暑期家教宣传单
2015/07/14 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
JS中如何优雅的使用async await详解
2021/10/05 Javascript
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers
Golang ort 中的sortInts 方法
2022/04/24 Golang
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android