Javascript check all checkboxes with same ID

问题:

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.

回答1:

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.

回答2:

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

回答3:

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.