解决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实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
jquery插件懒加载的示例
Oct 24 jQuery
jquery实现点击左右按钮切换图片
Jan 27 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仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
javascript计算对象长度的方法
2017/10/25 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
实习生的自我评价
2014/01/08 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
幼儿园小班评语
2014/04/18 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
Vue的过滤器你真了解吗
2022/02/24 Vue.js