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 相关文章推荐
jQuery之浮动窗口实现代码(两种方法)
Sep 08 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
jQuery基本选择器之标签名选择器
Sep 03 Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 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
利用 window_onload 实现select默认选择
2006/10/09 PHP
用PHP读取RSS feed的代码
2008/08/01 PHP
php学习之运算符相关概念
2011/06/09 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
监控 url fragment变化的js代码
2010/04/19 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
python获取糗百图片代码实例
2013/12/18 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
Python文件常见操作实例分析【读写、遍历】
2018/12/10 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
办公室文秘自我鉴定
2013/09/21 职场文书
法人代表证明书
2014/09/18 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
python使用pygame创建精灵Sprite
2021/04/06 Python
教你使用pyinstaller打包Python教程
2021/05/27 Python
一条 SQL 语句执行过程
2022/03/17 MySQL
MySQL 字符集 character
2022/05/04 MySQL
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis