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 Event学习补遗 addEventSimple
Feb 11 Javascript
javascript处理table表格的代码
Dec 06 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
JavaScript实现简单计算器
Mar 19 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 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/12/22 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
实例讲解php实现多线程
2019/01/27 PHP
jquery 日期分离成年月日的代码
2010/05/14 Javascript
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
JS执行删除前的判断代码
2014/02/18 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
生成二维码方法汇总
2014/12/26 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
python聊天程序实例代码分享
2013/11/18 Python
Python OS模块常用函数说明
2015/05/23 Python
python字符串过滤性能比较5种方法
2017/06/22 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
pycharm安装及如何导入numpy
2020/04/03 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
幼儿园大班评语大全
2014/04/17 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
社区端午节活动总结
2015/02/11 职场文书
优秀员工自荐书
2015/03/06 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript
pandas中pd.groupby()的用法详解
2022/06/16 Python