jquery中checkbox全选失效的解决方法


Posted in Javascript onDecember 26, 2014

如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将获得一个属性(attribute) ,它不改变该复选框被选中和选中。它只是用来存储默认或选中属性的初始值。为了保持向后兼容,.attr() 方法从 jQuery 1.6.1+ 开始除了返回属性值外,还会更新 property 属性,因此 boolean attribute(布尔属性)不需要通过 .prop() 来改变其值。推荐使用上述方法之一,来取得 checked 的值。

使用jQuery的attr方法获取和设置复选框的”checked”属性,发现第一次全选/取消全选有效,之后就无效了,但查看html源文件,复选框属性确实已经被更新了,就是页面中没有更新,正确的方法如下:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script type="text/javascript">// <![CDATA[
$(function(){
$('.ckAll').click(function(){
$(".box-items").each(function(){
  $(this).prop("checked",!!$(".box-all").prop("checked"));
});
});
});
// ]]></script>
<div><label class="ckAll"><input class="box-all" type="checkbox" /><span>全选</span></label>
<input class="box-items" type="checkbox" />
<input class="box-items" type="checkbox" />
<input class="box-items" type="checkbox" />
<input class="box-items" type="checkbox" />
<input class="box-items" type="checkbox" />
</div>
Javascript 相关文章推荐
Javascript 面向对象(二)封装代码
May 23 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
jQuery下拉框的简单应用
Jun 24 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
详解JavaScript中的this指向问题
Feb 05 Javascript
jQuery中change事件用法实例
Dec 26 #Javascript
jQuery中mouseover事件用法实例
Dec 26 #Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 #Javascript
Angularjs 基础入门
Dec 26 #Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 #Javascript
Javascript的闭包详解
Dec 26 #Javascript
jQuery中focus事件用法实例
Dec 26 #Javascript
You might like
PHP中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
跟我学Laravel之路由
2014/10/15 PHP
PHP中的Session对象如何使用
2015/09/25 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
Python如何省略括号方法详解
2020/03/21 Python
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
时尚圣经:The Fashion Bible
2019/03/03 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
英语道歉信范文
2014/01/09 职场文书
大学生自我鉴定评语
2014/01/27 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
本科应届生求职信
2014/08/05 职场文书
顶岗实习计划书
2015/01/16 职场文书
毕业生入职感言
2015/07/31 职场文书