解决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将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
实测jquery data()如何存值
Aug 18 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
bootstrap响应式工具使用详解
Nov 29 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 Javascript
吃通javascript正则表达式
Apr 21 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
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
php实现简单加入购物车功能
2017/03/07 PHP
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
2017/09/07 Javascript
vue组件父与子通信详解(一)
2017/11/07 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
python实现给数组按片赋值的方法
2015/07/28 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
Python如何合并多个字典或映射
2020/07/24 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
美国NBA官方商店:NBA Store
2019/04/12 全球购物
英国电气世界:Electrical World
2019/09/08 全球购物
生物科学专业个人求职信范文
2013/12/07 职场文书
纠风工作实施方案
2014/03/15 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
原生JS实现飞机大战小游戏
2021/06/09 Javascript
CSS中使用grid布局实现一套模板多种布局
2022/07/15 HTML / CSS