解决JQuery全选/反选第二次失效的问题


Posted in jQuery onOctober 11, 2017

最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了。

原代码大致结构关键如下:

function selectAll(obj){
    $('input[name="xxx[]"]').attr("checked",obj.checked);
}

<input type="checkbox" id="mother" name="mother" onclick="selectAll(this);"/>全选

<input type="checkbox" id="son1" name="xxx[]" />子框<input type="checkbox" id="son2" name="xxx[]" />子框<input type="checkbox" id="son3" name="xxx[]" />子框<input type="checkbox" id="son4" name="xxx[]" />子框

步骤一:尝试正面刚一波:

function selectAll(obj){
   if(obj.checked) {
    $('input[name="xxx[]"]').attr("checked", true);
   } else {
    $('input[name="xxx[]"]').removeAttr("checked");
   }
}

卒-----完全没有效果,弃之。

步骤二:快速上网搜索一番,发现这个问题比较常见,在遇到过这个问题的人里,我应该排在千里之外了。点开几个看了,基本都是说用prop替代attr便能解决,奈何如下:

解决JQuery全选/反选第二次失效的问题

然而项目上用的版本低于1.6并被告知最好不要更改版本,同弃之。

步骤三:无可奈何,JQuery弃之...尝试改用原生js写法,代码如下:

function selectAll(obj){
 var xxx = document.getElementsByName("xxx[]");
  if(obj.checked) {
   for(var i = 0;i < xxx.length;i++) {
    xxx[i].checked = true;
   }
  } else {
   for(var i = 0;i < xxx.length;i++) {
    xxx[i].checked = false;
   }
  }
}

测试一下,顺利解决。其实也算是个小问题,不过给了我一些启示,不能局限在一个框里,多换个角度思考问题,往往能更好地去解决问题。

以上这篇解决JQuery全选/反选第二次失效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
关于jQuery库冲突的完美解决办法
May 20 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jquery实现上传图片功能
Jun 29 jQuery
详解jQuery的核心函数和事件处理
Feb 18 jQuery
jQuery实现的form转json经典示例
Oct 10 #jQuery
认识jQuery的Promise的具体使用方法
Oct 10 #jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 #jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 #jQuery
jQuery实现html双向绑定功能示例
Oct 09 #jQuery
jqueryUI tab标签页代码分享
Oct 09 #jQuery
jQuery ajax调用webservice注意事项
Oct 08 #jQuery
You might like
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
python进程与线程小结实例分析
2018/11/11 PHP
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
vue响应式系统之observe、watcher、dep的源码解析
2019/04/09 Javascript
js实现时钟定时器
2020/03/26 Javascript
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
python简单实现操作Mysql数据库
2018/01/29 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
Python restful框架接口开发实现
2020/04/13 Python
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
中级会计职业生涯规划范文
2014/01/16 职场文书
会计电算化应届生自荐信
2014/02/25 职场文书
精神文明单位申报材料
2014/05/02 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
公司年会开场白
2015/06/01 职场文书