分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

关于JQuery全选/反选第二次失效的问题

发布时间:2023-09-06 01:16责任编辑:胡小海关键词:暂无标签

  最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了。原代码大致结构关键如下:

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便能解决,奈何如下:

  然而项目上用的版本低于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全选/反选第二次失效的问题

原文地址:http://www.cnblogs.com/young-z/p/7646237.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved