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中的delete介绍
Sep 02 Javascript
JQuery中dataGrid设置行的高度示例代码
Jan 03 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
JavaScript实现雪花飘落效果
Dec 27 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制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
Python 学习笔记
2008/12/27 Python
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
python实现定制交互式命令行的方法
2014/07/03 Python
Python转换HTML到Text纯文本的方法
2015/01/15 Python
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
Python基于动态规划算法计算单词距离
2015/07/25 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
加拿大时装零售商:Influence U
2018/12/22 全球购物
部队学习十八大感言
2014/01/11 职场文书
小学体育教学反思
2014/01/31 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书