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 相关文章推荐
ext 列表页面关于多行查询的办法
Mar 25 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
使用webpack打包koa2 框架app
Feb 02 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 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的宝库目录--PEAR
2006/10/09 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
PHP执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
python保存字符串到文件的方法
2015/07/01 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
雷蛇美国官网:Razer
2020/04/03 全球购物
工作自我评价分享
2013/12/01 职场文书
年度考核自我鉴定
2014/02/02 职场文书
大一新生学期自我评价
2014/04/09 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
Python实现byte转integer
2021/06/03 Python
配置nginx 重定向到系统维护页面
2021/06/08 Servers