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 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
window.open被浏览器拦截后的自定义提示效果代码
Nov 19 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
JS.getTextContent(element,preformatted)使用介绍
Sep 21 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 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/11/05 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
php简单截取字符串代码示例
2016/10/19 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
再论Javascript的类继承
2011/03/05 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
vue注册组件的几种方式总结
2018/03/08 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
python添加菜单图文讲解
2019/06/04 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
python实现文字版扫雷
2020/04/24 Python
使用html5制作loading图的示例
2014/04/14 HTML / CSS
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
委托公证书范本
2014/04/03 职场文书
导游个人求职信
2014/04/25 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
个人先进事迹材料
2014/12/29 职场文书
民事上诉状范文
2015/05/22 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
python for循环赋值问题
2021/06/03 Python