解决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对象的支持
Jul 25 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
js图片实时加载提供网页打开速度
Sep 11 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
vue+iview写个弹框的示例代码
Dec 05 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
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
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
理解JSON:3分钟课程
2011/10/28 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
Python绘制3D图形
2018/05/03 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
汽修专业学生自我鉴定
2013/11/16 职场文书
简历上的自我评价怎么写
2014/01/28 职场文书
超市活动计划书
2014/04/24 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
婚内分居协议书范文
2014/11/26 职场文书
培训督导岗位职责
2015/04/10 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
给朋友的赠语
2015/06/23 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
人生感悟经典句子
2019/08/20 职场文书
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL
python开发的自动化运维工具ansible详解
2021/08/07 Python