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 textarea的长度进行验证
May 06 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
初步了解javascript面向对象
Nov 09 Javascript
动态更新highcharts数据的实现方法
May 28 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
Oct 08 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
JavaScript中return用法示例
Nov 29 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
layui-table获得当前行的上/下一行数据的例子
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统计目录大小的自定义函数分享
2014/11/18 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
php json相关函数用法示例
2017/03/28 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
accesskey 提交
2006/06/26 Javascript
使用JavaScript switch case 另类写法
2010/03/14 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
Python守护线程用法实例
2017/06/23 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
python 将大文件切分为多个小文件的实例
2019/01/14 Python
python能在浏览器能运行吗
2020/06/17 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
简约控的天堂:The Undone
2016/12/21 全球购物
模具设计与制造专业应届生求职信
2013/10/18 职场文书
遗体告别仪式答谢词
2014/01/23 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
五年级作文之想象作文
2019/10/30 职场文书