selecting html checkbox based on json array values

Question

I have form where i am sending multiple checkbox items as array to controller,

<?php
    foreach($groupsArray as $group)
        {
?>
<label>
<input type="checkbox" class="icheck" name="groups[]" id="groups" value="<?php echo $group["id"];?>"> <?php echo $group['name']?> </label>

<?php
}
?>

Everything works fine for checkbox values update in database,

Now, what i am doing is, getting values from database and i need to check values which are stored in database,

I am getting below json response from PHP<

groups: [{user_id: "2", group_id: "4", id: "4", name: "system Creators",…}]

Below i used as AJAX

if(objData.groups[0].group_id == $("#groups").val())
    {
        $("#groups").iCheck('check');
    }

With this $("#groups").val(), it always takes values of first checkbox, so there is problem, How can i compare values for all checkboxes with Json? Also if groups array will have multiple values, means multidimensional array, more groups then?

Thanks in advance!

Answer 1

You need to be able to know which checkbox is related to which database value .

That is what the ID is used for on the checkbox . You have them all the same being "groups" - which is bad practice.

Use: (note the dynamic id attribute)

<?php
    foreach($groupsArray as $group)
        {
?>
<label>
<input type="checkbox" class="icheck" name="groups[]" id="chk<?php echo $group["id"];?>" value="<?php echo $group["id"];?>"> <?php echo $group['name']?> </label>

<?php
}
?>

Then loop around your group object from the database:

for(var i = 0; i < groups.length; i++) {
   var chk = document.getElementById("chk" + groups[i].id);
   chk.checked = true;
}

Answer 2

Try this:

PHP :

<?php
$count=0;
foreach($groupsArray as $group)
{
?>
    <label>
    <input type="checkbox" class="icheck" name="groups[]" id="groups<?php echo $count;?>" value="<?php echo $group["id"];?>"> <?php echo $group['name']; ?> </label>
<?php 
    $count++;
}
?>

Jquery :

for(var i=0;i<objData.gourps.length;i++){
    if(objData.groups[i].group_id == $("#groups"+i).val())
    {
        $("#groups"+i).iCheck('check');
    }
}

Answer 3

First, change the groups checkbox's id to it's class, so use class="groups" instead of id="groups" , like this:

<label><input type="checkbox" class="icheck" name="groups[]" class="groups" value="<?php echo $group["id"];?>"> <?php echo $group['name']?> </label>

Next, use the jQuery .each method to check all the checkboxes that is found in the JSON object like this:

$.each(objData, function(n, i){
    if(i.group_id == $(".groups[name="+n+"]").val()){
        $(".groups[name="+n+"]").iCheck('check');
    }
});

Answer 4

Finally, this worked! Find only those checkboxes which are coming from DB and check those.

for(var i = 0; i < objData.groups.length; i++) 
{
    $("#groups" + objData.groups[i].group_id).iCheck('check');
}

Thanks all for support!