基于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 树形结构的选择器
Feb 15 Javascript
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
vue基础之事件v-onclick="函数"用法示例
Mar 11 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
js基础语法与maven项目配置教程案例
Jul 15 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中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
配置php网页显示各种语法错误
2013/09/23 PHP
php查询whois信息的方法
2015/06/08 PHP
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
jquery自定义插件开发之window的实现过程
2016/05/06 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
三方协议书范本
2014/04/22 职场文书
教师自荐信范文
2015/03/06 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
初中思品教学反思
2016/02/20 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
MySQL 5.7常见数据类型
2021/07/15 MySQL
手写实现JS中的new
2021/11/07 Javascript
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫