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一些不错的函数脚本代码
Sep 10 Javascript
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
基于jquery的气泡提示效果
May 31 Javascript
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 Javascript
Vuex 进阶之模块化组织详解
Jan 12 Javascript
深入理解Vue Computed计算属性原理
May 29 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
详解Vue 动态组件与全局事件绑定总结
Nov 11 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 Javascript
element中el-container容器与div布局区分详解
May 13 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
用函数读出数据表内容放入二维数组
2006/10/09 PHP
php查询相似度最高的字符串的方法
2015/03/12 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
为超链接加上disabled后的故事
2010/12/10 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
Python常用算法学习基础教程
2017/04/13 Python
Python创建数字列表的示例
2019/11/28 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
Ajax主要包含了哪些技术
2014/06/12 面试题
开发房地产协议书
2014/09/14 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
婚宴主持词
2015/06/30 职场文书
2016年中秋祝酒词
2015/11/26 职场文书
《穷人》教学反思
2016/02/19 职场文书
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python
python 常用的异步框架汇总整理
2021/06/18 Python
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android