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!

Shaun · Accepted Answer · 2015-11-25 06:53:20Z

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

answered Nov 25, 2015 at 6:53

Shaun

9279 silver badges16 bronze badges

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

7 Comments

rjcode Over a year ago

what will be value of groups.length? Is it array length?, If Yes, then how it will check 5 checkboxes when i have array of only 2?

Shaun Over a year ago

Yes it's your group array and length . If you only have 2 items in the database, why would you "check" 5? If you mean like check/tick - you'd only want to tick the ones in the db yeah? If there a 5 checkboxes it will only check the ones you have saved.

rjcode Over a year ago

Hmmm, seems working now. It was typical iCheck plugin which lead me to change last line of your for loop, good. BTW, is dynamic id attribute is unique? I have same type of two pair of checkbox values, so i need to apply for another pair as well, same function.

Shaun Over a year ago

So you're saying the id $group[id] is not unique? So you can have 2 ids the same? If that's the case you need some sort of unique identifier. Perhaps the combination of group_id and id? Not totally sure what you mean.

rjcode Over a year ago

i mean i have another set of checkboxes permissions, like groups. And i am also getting another JSON permissions, so i need to duplicate another forloop with permissions.length, so i want to know what this dynamic id attribute does? Can is it be reused in another for loop?

|

Indrasinh Bihola · Accepted Answer · 2015-11-25 10:10:13Z

1

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

edited Nov 25, 2015 at 10:10

answered Nov 25, 2015 at 6:56

Indrasinh Bihola

2,1153 gold badges24 silver badges25 bronze badges

7 Comments

rjcode Over a year ago

Thanks, This seems very easy and quick near to my answer,

Shaun Over a year ago

Um aren't only the checked values stored in the database? This won't work.

rjcode Over a year ago

Agreed with @Shaun, i mixed examples of shaun and yours, but still have problem, first of all starting with i=0, there is not groups0 because there is no group_id = 0 in database, 2nd- if i have only 2 values in array and 5 checkboxes, then it will not loop for 5 times, so rest 3 checkboxes will be skipped!, still i have same issue!

Indrasinh Bihola Over a year ago

So Do you want to store all the values in database either checked or not??

Shaun Over a year ago

So don't mix - just use mine ;) I don't use the index of the loop, nor touch your group ids. Element Ids should always be unique

|

Jacques Marais · Accepted Answer · 2015-11-25 06:58:34Z

0

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

answered Nov 25, 2015 at 6:58

Jacques Marais

2,77619 silver badges34 bronze badges

Comments

rjcode · Accepted Answer · 2015-11-25 10:27:25Z

0

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!

answered Nov 25, 2015 at 10:27

rjcode

1,3472 gold badges27 silver badges65 bronze badges

Collectives™ on Stack Overflow

selecting html checkbox based on json array values

4 Answers 4

7 Comments

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related