How can I check checkboxes based on values?

Question

I am returning a JSON data structure that I split and populate my array like so:

var arrayValues = data.contents.split('|');

// arrayValues = 1,3,4

How can I check the corresponding checkboxes based on the array values?

My HTML looks like this:

 <div id="divID">
     <input type="checkbox" name="test" value="1" /> Test 1<br />
     <input type="checkbox" name="test" value="2" /> Test 2<br />
     <input type="checkbox" name="test" value="3" /> Test 3<br />
     <input type="checkbox" name="test" value="4" /> Test 4<br />
     <input type="checkbox" name="test" value="5" /> Test 5<br />                           
 </div>

What criteria would cause you to check / uncheck the boxes – JaredPar Nov 29 '11 at 18:48 — JaredPar, Nov 29 '11 at 18:48

ShankarSangoli · Accepted Answer · 2013-04-11T19:41:50.840

30

Try this using attribute selector

$.each(arrayValues, function(i, val){

   $("input[value='" + val + "']").prop('checked', true);

});

edited Apr 11 '13 at 19:41

answered Nov 29 '11 at 18:50

ShankarSangoli

69,612
13
93
124

This worked great...all I had to do was include the parent div tag. Thanks! – Paul Nov 29 '11 at 18:55
That should be `.prop('checked',true)` -- although JS considers the string "checked" to be true, so the end result is the same. – Blazemonger Nov 29 '11 at 19:23
This is simpler : `$('input[name="test"]').val(arrayValues);` See details in my answer [https://stackoverflow.com/a/44592561/2017567] – Christophe Quintard Nov 21 '18 at 10:54

score 16 · Answer 2 · edited Jun 19 '17 at 12:01

16

Javascript

$.each(arrayValues, function (index, value) {
  $('input[name="test"][value="' + value.toString() + '"]').prop("checked", true);
});

edited Jun 19 '17 at 12:01

Khader M A

5,423
3
19
19

answered Nov 29 '11 at 18:50

John Hartsock

85,422
23
131
146

1

This looks to be more accurate than ShankarSangoli's solution, although I don't see why the `.toString()` in the middle is necessary. Surely `value` will be a string in all circumstances. – Blazemonger Nov 29 '11 at 19:25
@mblase75 ... just a habit of mine. – John Hartsock Nov 29 '11 at 19:51
Yes, the author might have put toString to take care of cases where the value is a an integer, but ya, that too would be of string type in DOM – Abdul Vajid Mar 10 '16 at 05:43

score 3 · Answer 3 · answered Jun 16 '17 at 15:08

Simpler :

$('input[name="test"]').val(arrayValues);

This will check the values from the array and deselect the others.

From the JQuery's doc : http://api.jquery.com/val/

val() allows you to pass an array of element values. This is useful when working on a jQuery object containing elements like <input type="checkbox">, <input type="radio">, and <option>s inside of a <select>. In this case, the inputs and the options having a value that matches one of the elements of the array will be checked or selected while those having a value that doesn't match one of the elements of the array will be unchecked or unselected, depending on the type.

score 2 · Answer 4 · answered Nov 29 '11 at 18:49

You can loop through your array and do an attribute search on jQuery

var i = 0;
while (arrayValues.length < i) {
  var val = arrayValues[i];
  $('#divID input[value="' + val + '"]').prop('checked', 'checked');
  i++;
}

docs : http://api.jquery.com/attribute-equals-selector/

score 1 · Answer 5 · answered Nov 29 '11 at 19:00

Okay took me a moment to sort out my error in the code. I guess this question is answered by ShankarSangoli now.

I hope you don't mind me posting my solution either way. I'm just curious if this is worse for performance etc.

var arrayValues = new Array(1,3,4);

$('#divID input').filter(function(){
    return ($.inArray( parseInt($(this).attr('value')), arrayValues)) != -1;
}).attr('checked', 'checked');

How can I check checkboxes based on values?

5 Answers5

Linked