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 事件参考手册
Dec 24 Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
Angular 应用技巧总结
Sep 14 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
Dec 18 Javascript
JS实现iframe自适应高度的方法示例
Jan 07 Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 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
如何开始收听短波广播
2021/03/01 无线电
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
php版微信公众号自定义分享内容实现方法
2016/09/22 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
jQuery Ajax实现跨域请求
2017/01/21 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
使用python进行拆分大文件的方法
2018/12/10 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
keras中的backend.clip用法
2020/05/22 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
土木工程专业推荐信
2014/02/19 职场文书
开工仪式主持词
2014/03/20 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
go xorm框架的使用
2021/05/22 Golang
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers