基于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 相关文章推荐
window.open被浏览器拦截后的自定义提示效果代码
Nov 19 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
浅谈js中的this问题
Aug 31 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
webpack打包多页面的方法
Nov 30 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 Javascript
JS实现轮播图效果
Jan 11 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 foreach、while性能比较
2009/10/15 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
浅谈Javascript中Object与Function对象
2015/09/26 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
使用javascript插入样式
2016/03/14 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
韩国现代百货官网:Hmall
2018/03/21 全球购物
电子商务专业推荐信范文
2013/12/02 职场文书
一般党员对照检查材料
2014/09/24 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫
Tomcat用户管理的优化配置详解
2022/03/31 Servers