解决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用noConflict代替$的实现方法
Apr 12 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
jquery实现简易验证插件封装
Sep 13 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对数组排序代码分享
2014/02/24 PHP
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
浅析js封装和作用域
2013/07/09 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
关于numpy数组轴的使用详解
2019/12/05 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
Python递归函数特点及原理解析
2020/03/04 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
李宁官方网店:中国运动品牌
2017/11/02 全球购物
优秀员工自荐信范文
2013/10/05 职场文书
低碳生活倡议书
2014/04/14 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
电工生产实习心得体会
2016/01/22 职场文书
分享Python异步爬取知乎热榜
2022/04/12 Python