解决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中定义对象类别
Dec 22 Javascript
基于jQuery的模仿新浪微博时间的组件
Oct 04 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
JavaScript 中使用 Generator的方法
Dec 29 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
微信小程序实现左右联动的实战记录
Jul 05 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
vue项目接口域名动态获取操作
Aug 13 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 无限级分类 获取顶级分类ID
2016/03/13 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
php创建类并调用的实例方法
2019/09/25 PHP
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
jQuery标签替换函数replaceWith()的使用例子
2014/08/28 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
nodejs express配置自签名https服务器的方法
2018/05/22 NodeJs
Fetch超时设置与终止请求详解
2019/05/18 Javascript
Python中enumerate函数代码解析
2017/10/31 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
Python单元和文档测试实例详解
2019/04/11 Python
Pyqt5自适应布局实例
2019/12/13 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
Python气泡提示与标签的实现
2020/04/01 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
电气自动化自荐信
2013/10/10 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
入党自我鉴定
2014/03/25 职场文书
基层党员对照检查材料
2014/08/25 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
优秀团队申报材料
2014/12/26 职场文书
单位接收函范文
2015/01/30 职场文书
统招统分证明
2015/06/23 职场文书
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android