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 相关文章推荐
jQuery1.6 类型判断实现代码
Sep 01 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
Visual Studio中js调试的方法图解
Jun 30 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 Javascript
发布一款npm包帮助理解npm的使用
Jan 03 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 Javascript
vue3.0生命周期的示例代码
Sep 24 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 动态多文件上传
2009/01/18 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
jquery键盘事件使用介绍
2011/11/01 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
2018/08/07 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
pytorch 模型可视化的例子
2019/08/17 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
应届毕业生就业自荐信
2013/10/26 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
质量主管工作职责
2014/09/26 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
幼儿教师个人总结
2015/02/05 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS