解决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 02 Javascript
js确认删除对话框效果的示例代码
Feb 20 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
jQuery动态生成不规则表格(前后端)
Feb 21 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
vue实现页面滚动到底部刷新
Aug 16 Javascript
前端 javascript 实现文件下载的示例
Nov 24 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
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
Vue中"This dependency was not found"问题的解决方法
2018/06/19 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
python excel转换csv代码实例
2019/08/26 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
Python定义一个函数的方法
2020/06/15 Python
python 5个顶级异步框架推荐
2020/09/09 Python
什么是TCP/IP
2014/07/27 面试题
自我评价怎么写好呢?
2013/12/05 职场文书
工作室成员个人发展规划范文
2014/01/24 职场文书
送餐员岗位职责范本
2014/02/21 职场文书
毕业晚会主持词
2014/03/24 职场文书
差生评语大全
2014/05/04 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书