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 相关文章推荐
IE innerHTML,outerHTML所引起的问题
Jun 04 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
javascript密码强度校验代码(两种方法)
Aug 10 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
vue实现列表拖拽排序的功能
Nov 02 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 session机制
2011/07/17 PHP
php函数连续调用实例分析
2015/07/30 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
Node.js模块加载详解
2014/08/16 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
JavaScript实现的简单拖拽效果
2015/06/01 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
python实现web方式logview的方法
2015/08/10 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
python序列化与数据持久化实例详解
2019/12/20 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
绿化工程实施方案
2014/03/17 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
家长通知书家长意见
2015/06/03 职场文书
小学见习报告
2015/06/23 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android