基于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 相关文章推荐
一个js写的日历(代码部分网摘)
Sep 20 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
js实现模拟银行卡账号输入显示效果
Nov 18 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 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
杏林同学录(三)
2006/10/09 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
JS 控制小数位数的实现代码
2011/08/02 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
python实现进程间通信简单实例
2014/07/23 Python
Python入门篇之正则表达式
2014/10/20 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
基于Python os模块常用命令介绍
2017/11/03 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
python range实例用法分享
2020/02/06 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
上班早退检讨书
2014/01/09 职场文书
团队精神的演讲稿
2014/05/14 职场文书
大学新生入学教育方案
2014/05/16 职场文书
学校搬迁方案
2014/06/15 职场文书
小学生运动会报道稿
2014/09/12 职场文书
英文版辞职信
2015/02/28 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS
MYSQL 表的全面总结
2021/11/11 MySQL
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL