基于jQuery的checkbox全选问题分析


Posted in Javascript onNovember 18, 2016

本文实例分析了基于jQuery的checkbox全选问题。分享给大家供大家参考,具体如下:

最近开发项目时遇到一个很奇怪的问题,就是checkbox的全选与全不选
使用jQuery的框架。一直是使用

//检测选中的checkbox
$('input[name="abc"]:checked').each(function(){})

但是,发现我需要全选的时候,使用

$('input[name="abc"]').attr('checked',true);
$('input[name="abc"]').attr('checked',false);

时,第一次加载的时候管用,再次点击就只显示它自己了
但是点击的时候,查看源代码,属性checked已经添加上了
百思不得其解,最后搜索到,原来是 attr属性 对于checked来说他不会使dom样式改变,只会将它的属性值改变,jquery提供了取而代之的方法,如下就可以了

$('input[name="abc"]').prop('checked',true);
$('input[name="abc"]').prop('checked',false);

但是,问题又来了,不全选时我检测不到哪个元素被点击了,然后就在name上做文章

$('input[name="abc[]:checked"').each(function(i){});
//或者
$('input[name="abc[]"').each(function(i){
  var flag = $(this).prop('checked');
  if(flag){
   //$(this) 即为选中元素
 }
})

问题解决。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 Javascript
JavaScript用二分法查找数据的实例代码
Jun 17 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 Javascript
JavaScript动态数量的文件上传控件
Nov 18 #Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 #Javascript
Node.js 实现简单小说爬虫实例
Nov 18 #Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 #Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
Nov 18 #Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 #Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 #Javascript
You might like
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
php无限极分类实现方法分析
2019/07/04 PHP
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
JS模板实现方法
2013/04/03 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
nodejs express配置自签名https服务器的方法
2018/05/22 NodeJs
React 路由懒加载的几种实现方案
2018/10/23 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
Python中的自定义函数学习笔记
2014/09/23 Python
Python实现给文件添加内容及得到文件信息的方法
2015/05/28 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
2019年Java面试必问之经典试题
2012/09/12 面试题
涉外文秘个人求职的自我评价
2013/10/07 职场文书
采购文员岗位职责
2013/11/20 职场文书
应届毕业生求职自荐书
2014/01/03 职场文书
小学运动会表扬稿
2014/01/19 职场文书
四群教育工作实施方案
2014/03/26 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
七夕情人节问候语
2015/11/11 职场文书
七年级作文之雪景
2019/11/18 职场文书
详解Python中的进程和线程
2021/06/23 Python