Javascript check all checkboxes with same ID

Question

I have the following

<form class="form-inline" role="form">
    <div class="col-xs-3">
        <div class="pic-container">

                    <label>
                        <span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check11' value="">ciao</span><br>
                    </label>

        </div>
    </div>
    <div class="col-xs-3">
        <div class="pic-container">

                    <label>
                        <span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
                    </label>
                    <label>
                        <span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
                    </label>
                    <label>
                        <span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
                    </label>
                    <label>
                        <span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
                    </label>
                    <label>
                        <span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
                    </label>
                    <label>
                        <span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
                    </label>
        </div>
    </div>
</form>

Id like by clicking the first check box that all check boxes in the second div with an ID of "check21" to be chacked automatically.

<script>
    function handleChange(cb) {
        if(cb.checked == true) {
           document.getElementById("check21").checked = true;
           alert('eyaicecold');
        } else {
           alert('Message 2');
           var x = document.getElementById("check21").disabled= false;
        }
    }
</script>

I have used the following script which works but only for the first one. I wan to use the ids since the name and the value will be used to send the sql request trough the form.

It is not valid HTML to have multiple elements with the same ID. — Domino, Aug 18 '15 at 16:05
@Patrick2607 Or names. Which, ironically, OP is already doing. — Siguza, Aug 18 '15 at 16:06
@Siguza He's using multiple instances of the same ID in his DOM, that's not valid HTML and will cause conflicts, I wasn't answering his question but suggesting he should use classes if he wants to initiate multiple instances with the same selector. — Starfish, Aug 18 '15 at 16:09
`var test = document.querySelectorAll('input[type="checkbox"])');` — Dalorzo, Aug 18 '15 at 16:09
@Patrick2607 No need to teach me basic HTML, I was just saying that names are about as good as classes in this case, especially since all his checkboxes already have `name="discounting"` set. — Siguza, Aug 18 '15 at 16:11
@Siguza true - but in this case not all of those `name=discounting` items have the same id-that-should-be-a-class, so you'd match the wrong set of checkboxes. — Paul Roub, Aug 18 '15 at 16:21

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

3

As has been pointed out in the comments, IDs must be unique, so you can change them to classes if you like. Then you can use this jQuery:

$('input.check11').click(function(){
  $('input.check21').prop('checked',this.checked)
})

bootply example

Also, remove those inline event handlers.

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 18 '15 at 16:15

j08691

204,283
31
260
272

score 2 · Answer 2 · answered Aug 18 '15 at 16:18

As said before, each element on a webpage should have a unique ID.

However, it can still be done using querySelectorAll like so:

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

Here is the JSFiddle demo

score 0 · Answer 3 · edited May 23 '17 at 12:13

The idea behind IDs is that they are unique. It's what allows you to get a single element with the getElementById function, while other getElementsByXXX functions return a list of elements (hence the s in getElements).

When you retrieve the POST data (through PHP or another server language), you will need to check if the variable called like the name attribute is set. If it is, then the checkbox was checked. Having multiple checkboxes with the same name like you did won't work. This other SO answer explains how to use POST data from checkboxes very well.

If you choose to go with name="something[]" notation, when you could check all boxes of the second div with:

var checkboxes = myDiv.getElementsByName("something[]");
for(var i=0; i < checkboxes.length; ++i) {
    checkboxes[i].checked = true;
}

You could also use classes, but I think that would just bloat the code while you already need to use names for forms anyway.

I am not sure about latest version(s) of IE, but earlier versions do not support getElementsByName() — dneimeier, Mar 31 '18 at 00:28
@dneimeier Not sure where you're taking that from, getElementsByName has existed since the [early drafts of DOM 2 back in 1999](https://www.w3.org/TR/1999/WD-DOM-Level-2-19990923/) so I'm pretty sure any browser that wouldn't support it wouldn't be compatible with any site made today. — Domino, Mar 31 '18 at 14:29

Javascript check all checkboxes with same ID

3 Answers3

Linked