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 相关文章推荐
ASP SQL防注入的方法
Dec 25 Javascript
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
javascript中创建对象的三种常用方法
Dec 30 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
flexible.js实现移动端rem适配方案
Apr 07 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读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
PHP递归调用的小技巧讲解
2013/02/19 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
用js实现放大镜的效果的简单实例
2016/05/23 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
用js实现放大镜效果
2020/10/28 Javascript
python 自定义装饰器实例详解
2019/07/20 Python
详解Python self 参数
2019/08/30 Python
C语言中break与continue的区别
2012/07/12 面试题
小学教育见习总结
2015/06/23 职场文书
Python内置数据结构列表与元组示例详解
2021/08/04 Python