CODEWITHSUNDEEP
javascriptcheckbox
MTplus
MTplus

Reputation: 2391

Find checkboxes by value with javascript

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?

Upvotes: 7

Views: 16750

Answers (2)

Ivan Chernykh
Ivan Chernykh

Reputation: 42166

Try querySelectorAll : 

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

No need in jQuery , pure Vanilla JavaScript!

Upvotes: 15

Rob
Rob

Reputation: 11788

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)

Upvotes: 1

Related Questions