基于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 相关文章推荐
javascript知识点收藏
Feb 22 Javascript
javascript 动态加载 css 方法总结
Jul 11 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
深入理解 webpack 文件打包机制(小结)
Jan 08 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文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
海河写的 Discuz论坛帖子调用js的php代码
2007/08/23 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
PHP+jQuery实现即点即改功能示例
2019/02/21 PHP
JQUERY操作JSON实例代码
2010/02/09 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
基于React+Redux的SSR实现方法
2018/07/03 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
Django中FilePathField字段的用法
2020/05/21 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
python实现图片转字符画的完整代码
2021/02/21 Python
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
酒店副总经理岗位职责范本
2014/02/04 职场文书
公证书样本
2014/04/10 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS