JavaScript how to combine getElementsByName and getElementsById (select all checkbox)

Question

I have this structure:

<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

and when I check the first row where is the onclick function, then it should select all checkboxes with name id[] and id 'gr0' (and uncheck if I uncheck this "master" checkbox same when I do this with the second/third master checkbox where in onclick function is second value 'gr1' or 'gr2'

I have tried this, but it doesnt work:

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

can you please help me out?

`id`s need to be unique within a document. This is invalid HTML. — Ivar, Jun 11 '20 at 13:45
so what would be the alternative solution to achieve my goal? — Jiri Zaloudek, Jun 11 '20 at 13:46
Add a `class` to the elements that you want to select in a group. Then use `document.getElementsByClassName()` or `document.querySelectorAll('.class-name')` to select the ones you need. — Ivar, Jun 11 '20 at 13:47

score 1 · Answer 1 · answered Jun 11 '20 at 13:47

How you can see i just take id_group use queryselector and with for select all input from that and check.

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

score 0 · Accepted Answer · answered Jun 11 '20 at 13:55

At the end, this was extremly silly question which I handled like this:

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

im sorry all for inconviences but extremly appriciate all your efforts!

JavaScript how to combine getElementsByName and getElementsById (select all checkbox)

2 Answers2