JavaScript如何结合getElementsByName和getElementsById（全选复选框）[重复]答案

【问题标题】：JavaScript how to combine getElementsByName and getElementsById (select all checkbox) [duplicate]JavaScript如何结合getElementsByName和getElementsById（全选复选框）[重复]
【发布时间】：2020-06-11 13:39:39
【问题描述】：

我有这个结构：

<input type=checkbox onclick="toggle(this, 'gr0');">
<input type=checkbox name=id[] id=gr0 value=$id> something1
<input type=checkbox name=id[] id=gr0 value=$id> something1
<input type=checkbox name=id[] id=gr0 value=$id> something1
<input type=checkbox name=id[] id=gr0 value=$id> something1

<input type=checkbox onclick="toggle(this, 'gr1');">
<input type=checkbox name=id[] id=gr1 value=$id> something2
<input type=checkbox name=id[] id=gr1 value=$id> something2
<input type=checkbox name=id[] id=gr1 value=$id> something2
<input type=checkbox name=id[] id=gr1 value=$id> something2

<input type=checkbox onclick="toggle(this, 'gr2');">
<input type=checkbox name=id[] id=gr2 value=$id> something2
<input type=checkbox name=id[] id=gr2 value=$id> something2
<input type=checkbox name=id[] id=gr2 value=$id> something2
<input type=checkbox name=id[] id=gr2 value=$id> something2

当我检查第一行 onclick 函数在哪里时，它应该选择所有名称为 id[] 和 id 'gr0' 的复选框（并取消选中我是否取消选中此“主”复选框当我使用第二个/第三个主复选框执行此操作时相同，其中 onclick 函数是第二个值“gr1”或“gr2”

这个我试过了，还是不行：

<script>
    function toggle(source, id_group) {
        checkboxes = document.getElementsByName('id[]').getElementsById(id_group);
        for(var i=0, n=checkboxes.length;i<n;i++) {
            checkboxes[i].checked = source.checked;
        }
    }
</script>

你能帮帮我吗？

【问题讨论】：

ids 在文档中必须是唯一的。这是无效的 HTML。
那么实现我的目标的替代解决方案是什么？
将class 添加到要在组中选择的元素。然后使用document.getElementsByClassName() 或document.querySelectorAll('.class-name') 选择您需要的。

标签： javascript html checkbox onclick

【解决方案1】：

你怎么看我只是把id_group用queryselector和for从那里选择所有输入并检查。

function toggle( id_group) {
 var allCB = document.querySelectorAll("input[id='"+id_group+"']");
    for(var i=0; i< allCB.length; i++){
        allCB[i].checked=true;
    }
    }

<input type=checkbox onclick="toggle('gr0');">
<input type=checkbox name=idgr0[] id=gr0 value='01'>
<input type=checkbox name=idgr0[] id=gr0 value='02'> 
<input type=checkbox name=idgr0[] id=gr0 value='03'> 
<input type=checkbox name=idgr0[] id=gr0 value='04'> 
<br>
<input type=checkbox onclick="toggle('gr1');">
<input type=checkbox name=idgr1[] id=gr1 value='05'> 
<input type=checkbox name=idgr1[] id=gr1 value='06'> 
<input type=checkbox name=idgr1[] id=gr1 value='07'> 
<input type=checkbox name=idgr1[] id=gr1 value='08'> 
<br>
<input type=checkbox onclick="toggle('gr2');">
<input type=checkbox name=idgr2[] id=gr2 value='09'> 
<input type=checkbox name=idgr2[] id=gr2 value='10'> 
<input type=checkbox name=idgr2[] id=gr2 value='11'> 
<input type=checkbox name=idgr2[] id=gr2 value='12'>

【讨论】：

【解决方案2】：

最后，这是我这样处理的极其愚蠢的问题：

<script>
    function toggle(source, id_group) {
        checkboxes = document.getElementsByName('id[]');
        for(var i=0, n=checkboxes.length;i<n;i++) {
            if(checkboxes[i].className == id_group) {
                checkboxes[i].checked = source.checked;
            }
        }
    }
</script>


<input type=checkbox onclick="toggle(this, 'gr0');">
<input type=checkbox name=id[] class=gr0 value=$id> something1<br>
<input type=checkbox name=id[] class=gr0 value=$id> something1<br>
<input type=checkbox name=id[] class=gr0 value=$id> something1<br>
<input type=checkbox name=id[] class=gr0 value=$id> something1<br>

<input type=checkbox onclick="toggle(this, 'gr1');">
<input type=checkbox name=id[] class=gr1 value=$id> something2<br>
<input type=checkbox name=id[] class=gr1 value=$id> something2<br>
<input type=checkbox name=id[] class=gr1 value=$id> something2<br>
<input type=checkbox name=id[] class=gr1 value=$id> something2<br>

<input type=checkbox onclick="toggle(this, 'gr2');">
<input type=checkbox name=id[] class=gr2 value=$id> something2<br>
<input type=checkbox name=id[] class=gr2 value=$id> something2<br>
<input type=checkbox name=id[] class=gr2 value=$id> something2<br>
<input type=checkbox name=id[] class=gr2 value=$id> something2<br>

对于给您带来的不便，我深表歉意，但非常感谢您的所有努力！

【讨论】：