How to change checkbox follow JSON string?

Question

I want to change checkbox follow JSON string . But i don't know how do it . This is me JSON string, "1" is mean checked and "0" is mean unchecked

[{"Group_Product":"G04","Orange":1,"Banana":0,"Apple":1,"Candy":0,"Food":1}]

And html code.

<table id=table_product>
<tr><td><input type="checkbox" class="checkbox1" id="Orange" name="check[]" />Orange</td></tr>
<tr><td><input type="checkbox" class="checkbox1" id="Banana" name="check[]" />Banana</td></tr>
<tr><td><input type="checkbox" class="checkbox1" id="Apple" name="check[]" />Apple</td></tr>
<tr><td><input type="checkbox" class="checkbox1" id="Candy" name="check[]" />Candy</td></tr>
<tr><td><input type="checkbox" class="checkbox1" id="Food" name="check[]" />Food</td></tr>   
</table>

Ok , i use this ways.I'll get name and value in Object JSON, then compare with id of checkbox and checked it.

contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                         var obj = jQuery.parseJSON(data.d);
                            for (var item in obj[0]) {
                                if (item.valueOf > 0) {
                                    document.getElementById(item).checked = true;
                                }
                            }
                    },
                    error: function (data) {
                        console.log(data.d);
                    }

If you have a idea or solution, share with me.

Json includes booleans - use `true` and `false` instead of `1` and `0` — Basic, Jun 14 '15 at 10:58
the main issue here is to change the checkbox under JSON, JSON string longer I can change according to 1 and 0 or true and false.I think it's just the comparison = 1 or = "true" is checked. It is not very important — Brian Crist, Jun 14 '15 at 11:02
possible duplicate of [Checking a checkbox with jQuery?](http://stackoverflow.com/questions/426258/checking-a-checkbox-with-jquery) — Basic, Jun 14 '15 at 11:10

Basic · Accepted Answer · 2015-06-14T14:19:22.220

2

Add an Id to your checkboxes...

<input type="checkbox" class="checkbox1" id="chkApple"  name="check[]" />Apple

Then check them as follows:

success: function (data) {
    var obj = jQuery.parseJSON(data.d);
    $("#chkApple").prop('checked', obj[0].Apple > 0);
}

or better yet, change your Json to use booleans not integers and you get...

    $("#chkApple").prop('checked', obj[0].Apple);

Note that we're using obj[0] because your Json is a currently list with a single object. Did you intend that?

If not, remove the [] from the json...

{"Group_Product":"G04","Orange":true,"Banana":false,"Apple":true,"Candy":false,"Food":true}

and then it becomes

    $("#chkApple").prop('checked', obj.Apple);

To answer your question in comments...

var obj = jQuery.parseJSON(data.d);
for (var item in obj[0]) {
    document.getElementById(item).checked = obj[0][item] > 0;
}

edited Jun 14 '15 at 14:19

answered Jun 14 '15 at 11:02

Basic

26,321
24
115
201

Ok, I added id to my checkbox , same name of JSON object `Orange` . And i don't know can i use this ways `var obj = jQuery.parseJSON(data.d); for (var i = 0; i < obj.properties; i++) { $('"#' + obj.properties[i].name + '"').prop('checked', obj.properties[i].value > 0); }` – Brian Crist Jun 14 '15 at 11:40
Is this because the list of properties is dynamic? The approach you're taking seems perfectly valid but I'd need to see an example page and/or look in the debugged to work out why it might not be working. Be aware this approach is slightly fragile as you're hoping you won't have any Ids clash (what if I had another element with Id `Orange` or your Json had a field called `body` - either would break.). Consider pre-pending a constant string to the id – Basic Jun 14 '15 at 13:01
Well, @basic, please see update my question . List checkbox in a table , and i'll get name `Apple,Banana,Candy,...` and set checkbox is `true` . But I'm missing here is finding the value 1 or 0 to each item . Do you have idea ? – Brian Crist Jun 14 '15 at 14:13
See my edit which should make it clear. Be aware that's you're using tables wrong in your question. You need to specify rows and columns`
...
` – Basic Jun 14 '15 at 14:19
Dear @basic , so hurry too, so I lack ` ... td> tr>`. Thank you for reminding . I have updated code . I use answer of you and get error `Uncaught TypeError: Cannot set property 'checked' of null` , because not checkbox with id `Group_Product` and value of it is `G04` .I thinking about this. – Brian Crist Jun 14 '15 at 14:28
No worries. Have I answered your question? Working Jsfiddle here: https://jsfiddle.net/j8t754em/ – Basic Jun 14 '15 at 14:29
I use answer of you and get error `Uncaught TypeError: Cannot set property 'checked' of null` , because not checkbox with id `Group_Product` and value of it is `G04` .I thinking about this. – Brian Crist Jun 14 '15 at 14:34
See the jsfiddle in my previous comment. I'm checking for that. It's worth noting that if you used the jQuery `$('#Id')` syntax, you wouldn't need that check, but using the non-jQuery `document.getElementById` returns `null` if the id doesn't exist – Basic Jun 14 '15 at 14:35
Well , it's work ,I have seen, You should update answer . thank you so much – Brian Crist Jun 14 '15 at 14:41

How to change checkbox follow JSON string?

1 Answers1