时间戳

首页 > 解决方案 > JavaScript 如何结合 getElementsByName 和 getElementsById （选择所有复选框）

javascript - JavaScript 如何结合 getElementsByName 和 getElementsById （选择所有复选框）

问题描述

我有这个结构：

<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>

你能帮帮我吗？

标签： javascripthtmlcheckboxonclick

解决方案

你怎么能看到我只是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'>

推荐阅读