I am getting values (1 or 0) from my database via ajax/jquery and I want to set a bunch of checkbox checked states depending on the values returned for each.

So firstly, I am setting the values for all checkboxes. Then I run a function to set the checkbox checked state based on the values. When I try this, all checkboxes are checked regardless of value:

Snippet of my Ajax response (jQuery)

    .success(function(response) {
        $('input').removeClass('error').next('.errormessage').html('');
        if(!response.errors && response.result) {
            $.each(response.result, function( index, value) {

                $("#checkbox1").prop('value',value[2]);
                $("#checkbox2").prop('value',value[3]);
                $("#checkbox3").prop('value',value[4]);
                $("#checkbox4").prop('value',value[5]);

           });
            $("#div :checkbox").each(function () {
                 if ($(this).attr('value', '1')){
                     $(this).attr('checked', true);
                 }
                 else
                  if ($(this).attr('value', '0')){
                     $(this).attr('checked', false);
                 }
                }); 
        } else {
            $.each(response.errors, function( index, value) {
                $('input[name*='+index+']').addClass('error').after('<div class="errormessage">'+value+'</div>')
            });

        }
    });

I am getting values (1 or 0) from my database via ajax/jquery and I want to set a bunch of checkbox checked states depending on the values returned for each.

So firstly, I am setting the values for all checkboxes. Then I run a function to set the checkbox checked state based on the values. When I try this, all checkboxes are checked regardless of value:

Snippet of my Ajax response (jQuery)

    .success(function(response) {
        $('input').removeClass('error').next('.errormessage').html('');
        if(!response.errors && response.result) {
            $.each(response.result, function( index, value) {

                $("#checkbox1").prop('value',value[2]);
                $("#checkbox2").prop('value',value[3]);
                $("#checkbox3").prop('value',value[4]);
                $("#checkbox4").prop('value',value[5]);

           });
            $("#div :checkbox").each(function () {
                 if ($(this).attr('value', '1')){
                     $(this).attr('checked', true);
                 }
                 else
                  if ($(this).attr('value', '0')){
                     $(this).attr('checked', false);
                 }
                }); 
        } else {
            $.each(response.errors, function( index, value) {
                $('input[name*='+index+']').addClass('error').after('<div class="errormessage">'+value+'</div>')
            });

        }
    });

• javascript
• jquery
• ajax
• checkbox

• use "checked" instead of "value" when you set the value ... .prop('checked', true) .. electrictoolbox./check-uncheck-checkbox-jquery – Daniel Commented Mar 17, 2016 at 15:08
• But I only want it to be checked if the value is 1, if the value is 0, I dont want it to be checked. – user5563910 Commented Mar 17, 2016 at 15:09
• But 1 and 0 is like true or false. The checkbox will be set accordingly. I also was assuming the the first #checked .. where the checkboxes ... I may have been wrong there. Still 0/1 is to switch the checkbox, so setting with 0 is just as valid to set the checkbox. – Daniel Commented Mar 17, 2016 at 15:12
• Oh I didn't know that! Let me try it and let you know. Thanks – user5563910 Commented Mar 17, 2016 at 15:13
• That didn't work either. I tried $("#checkbox1").attr('checked',value[2]); and also $("#checkbox1").prop('checked',value[2]); When I console.log the values I am getting 1 and 0 etc. – user5563910 Commented Mar 17, 2016 at 15:17

3 Answers 3

You are likely trying to set the value of the checkbox false with a string. This does not work. You need it to be a booelan true/false or 0/1 .. The value "0" will set the checkbox "checked". See the example and how the second checkbox remains checked.

$(document).ready(function() {

  $("#chkbox1").prop("checked", 0);
  $("#chkbox2").prop("checked", "0");
  $("#chkbox3").prop("checked", 1);
  $("#chkbox4").prop("checked", "1");


  $("#chkbox5").prop("checked", parseInt("0"));

});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label>
  <input id="chkbox1" type="checkbox" name="chk" checked />checkbox1
</label>
<label>
  <input id="chkbox2" type="checkbox" name="chk" checked/>checkbox2
</label>
<label>
  <input id="chkbox3" type="checkbox" name="chk" />checkbox3
</label>
<label>
  <input id="chkbox4" type="checkbox" name="chk" />checkbox4
</label>
<p>
  <label>
    <input id="chkbox5" type="checkbox" name="chk" checked />checkbox5
  </label>
</p>

To properly "check/uncheck" a chekcbox you should use the jQuery functions prop('checked',true) or prop('checked',false).

Change the if/else statement in this way:

             if ($(this).attr('value', '1')){
                 $(this).prop('checked', true);
             }
             else
              if ($(this).attr('value', '0')){
                 $(this).prop('checked', false);
             }

You are not checking for current value you are setting value to 1 for all checkboxes;

if ($(this).attr('value', '1')){ 

.attr('attribute name', [new value to set]);

So you are using this function in wrong way. To get value try

if ($(this).attr('value')){

Here you will get 1 or 0 as you said you are getting 1 & 0 from server after ajax.