基于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 相关文章推荐
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 Javascript
js实现简单的左右两边固定广告效果实例
Apr 10 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
详解AngularJs ui-router 路由的简单介绍
Apr 26 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 Javascript
JS自定义对象创建与简单使用方法示例
Jan 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
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
php class类的用法详细总结
2013/10/17 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
总结JavaScript中布尔操作符||与&&的使用技巧
2015/11/17 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
2017/01/05 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
"序列点" 是什么
2016/07/29 面试题
离婚协议书标准格式
2014/10/04 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python
css3带你实现3D转换效果
2022/02/24 HTML / CSS
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python
nginx配置指令之server_name的具体使用
2022/08/14 Servers