Find checkboxes by value with javascript

Question

I have used this JavaScript to find the checkboxes I need and check them.

<script type="text/javascript">
function checkAll(c) {
    var chks = document.getElementsByName(c.name);
    for (var i = 0; i < chks.length; i++) {
        chks[i].checked = c.checked;
    }
}

But I cannot use that anymore and wonder if I could find them by their value names, lets say I have 3 checkboxes that are rendered like this..

<input name="2" type="checkbox" value="chk2" onclick="checkAll(this)">
<input name="3" type="checkbox" value="chk2" onclick="checkAll(this)">
<input name="4" type="checkbox" value="chk3" onclick="checkAll(this)">

If I then check one of the checkboxes with value="chk2" both of them should be checked, but no the one that have a value equals to chk3. Is this possible?

Answer 1

Try querySelectorAll :

var chks = document.querySelectorAll("input[type='checkbox'][value='chk2']");

No need in jQuery , pure Vanilla JavaScript!

Answer 2

Please consider using jQuery and a statement like this which checks all checkboxes with the value "chk2":

$("input:checkbox[value='chk2']").attr("checked", true);

Edit: A more elegant way would be the use of a ViewModel. Then you can bind the checkboxes to one single data entity and the checkboxes get checked/unchecked whenever the value of he underlying data changes. You can achieve that with knockout.js and it's easy to implement (http://knockoutjs.com)