基于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 相关文章推荐
Jquery截取中文字符串的实现代码
Dec 22 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
Jul 11 Javascript
理解Javascript闭包
Nov 01 Javascript
Javascript Ajax异步读取RSS文档具体实现
Dec 12 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
JS中的多态实例详解
Oct 15 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 Javascript
javascript对象3个属性特征
Nov 17 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中GET变量的使用
2006/10/09 PHP
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
js继承的实现代码
2010/08/05 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
python matplotlib画图实例代码分享
2017/12/27 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
Python同步遍历多个列表的示例
2019/02/19 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
如何使用python操作vmware
2019/07/27 Python
python 遍历pd.Series的index和value
2019/11/26 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
工会积极分子个人总结
2015/03/03 职场文书
教师党员自我评价2015
2015/03/04 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
Python 线程池模块之多线程操作代码
2021/05/20 Python
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python