2

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>')
            });

        }
    });
Improve this question
7
  • use "checked" instead of "value" when you set the value ... .prop('checked', true) .. electrictoolbox.com/check-uncheck-checkbox-jquery 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. 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. Commented Mar 17, 2016 at 15:12
  • Oh I didn't know that! Let me try it and let you know. Thanks 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. Commented Mar 17, 2016 at 15:17

3 Answers 3

Reset to default
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.com/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>

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Why is checkbox 4 checked then in the snippet?
How would I convert my string to boolean? I just tried parseBool(value[0]) but i get a parseBool is not defined error
That doesn't work either. I forgot to mention I am using Bootstrap. Does that change how to interact with checkboxes?
No ... I assume you got jQuery integrated and that is all you need. I added an example to the checkboxes. I don't know man. Perhaps you should paste a snippet of your results from your console.
Thanks for your help Daniel, Much appreciated :) I am going to comb over all my code now just to make sure i'm not doing anything stupid because your snippet clearly works so it must be another issue with my code. Thanks again!
0

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);
             }
Improve this answer

1 Comment

Thanks Antonio. I tried that but all checkboxes remain checked.
0

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.

Improve this answer

1 Comment

Thanks @itzmukeshy7. I will try that out :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.