解决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 相关文章推荐
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
js处理json以及字符串的比较等常用操作
Sep 08 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
Javascript玩转继承(二)
May 08 Javascript
node.js中的console.timeEnd方法使用说明
Dec 09 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 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的可变变量名需要的注意的问题
2013/06/20 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
laravel入门知识点整理
2020/09/15 PHP
新闻内页-JS分页
2006/06/07 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
JavaScript实现关键字高亮功能
2014/11/12 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
python3 实现的人人影视网站自动签到
2016/06/19 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
Python Socket使用实例
2017/12/18 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
基于Python实现天天酷跑功能
2021/01/06 Python
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
政风行风评议心得体会
2014/10/21 职场文书
2014年材料员工作总结
2014/11/19 职场文书
护士辞职信怎么写
2015/02/27 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
导游带团欢迎词
2015/09/30 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python