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 iframe的相互操作浅析
Oct 14 Javascript
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
js实现商品抛物线加入购物车特效
Nov 18 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
node运行js获得输出的三种方式示例详解
Jul 02 Javascript
请求时token过期自动刷新token操作
Sep 11 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学习之 数组声明
2011/06/09 PHP
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
python实现bitmap数据结构详解
2014/02/17 Python
Python中的startswith和endswith函数使用实例
2014/08/25 Python
python中的函数用法入门教程
2014/09/02 Python
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
python实现的简单文本类游戏实例
2015/04/28 Python
Python标准库之collections包的使用教程
2017/04/27 Python
python实现简易通讯录修改版
2018/03/13 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
python函数的作用域及关键字详解
2019/08/20 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
教学大赛获奖感言
2014/01/15 职场文书
小学生暑假感言
2014/02/06 职场文书
美术课外活动总结
2014/07/08 职场文书
公民代理授权委托书
2014/09/24 职场文书
2014年新教师工作总结
2014/11/08 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python
浅析NIO系列之TCP
2021/06/15 Java/Android