基于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 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
javascripit实现密码强度检测代码分享
Dec 12 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 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下MAIL的另一解决方案
2006/10/09 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
javascript中的缓动效果实现程序
2012/12/29 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
python+opencv识别图片中的圆形
2020/03/25 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
妇科医生自荐信
2013/11/05 职场文书
QA工程师岗位职责
2013/11/20 职场文书
《散步》教学反思
2014/03/02 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
年终总结会主持词
2014/03/25 职场文书
文艺晚会策划方案
2014/06/11 职场文书
初中政治教师教学反思
2016/02/23 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记
openstack云计算keystone组件工作介绍
2022/04/20 Servers