基于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 相关文章推荐
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 Javascript
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
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加密解密函数authcode的用法详细解析
2013/10/28 PHP
php实现的双向队列类实例
2014/09/24 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
PHP实现微信发红包程序
2015/08/24 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
PHP读取Excel类文件
2017/05/15 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
javascript中不易分清的slice,splice和split三个函数
2016/03/29 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
总结js函数相关知识点
2018/02/27 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
《四季》教学反思
2014/04/08 职场文书
国庆庆典邀请函
2015/02/02 职场文书
2015年社区工作总结
2015/04/08 职场文书
电影圆明园观后感
2015/06/03 职场文书