Set checkbox with jquery based on array value

Question

I'm working with a table in Bootstrap and one of the columns is for a checkbox. The table is filled with the values from a mysql db. In the db the column for the checkbox has a value of 1, or 0. I want the checkbox to be checked if the value is 1. I have this code, but it only works for the first checkbox. How can i use it for all checkboxes? This is my code.

                <tbody>
<?php while($row = $sql->fetch()) { ?>
  <tr>
    <td><?php echo $row['Opleiding_ID']; ?></td>
    <td><?php echo $row['Opleiding']; ?></td>
    <?php $checked = $row['Hidden']; ?>

    <script type="text/JavaScript">
$(document).ready(function(){


                  var arr<?php echo $row["Opleiding_ID"]; ?> = <?php echo json_encode($checked); ?>;

              if (arr<?php echo $row["Opleiding_ID"]; ?> == "1") {

    $("#mycheckbox<?php echo $row["Opleiding_ID"]; ?>").prop('checked', true);
                  } else {
                    $("#mycheckbox<?php echo $row["Opleiding_ID"]; ?>").prop('checked', false);  
                  }
                  });



</script>        
    <td><input type="checkbox" id="mycheckbox<?php echo $row["Opleiding_ID"]; ?>" name="checks" value="" class="check"></td>
  </tr>
  <?php } ?>
</tbody>

What does your markup look like? You are currently using an ID-based selector for mycheckbox and generally ID fields should be unique. If we see what your markup looks like, it might make this a bit easier. — Rion Williams
– Rion Williams, Commented Apr 8, 2016 at 21:07
You are doing assign operator '=' in your if statement, it should be a compare operator '==' — DinoMyte
– DinoMyte, Commented Apr 8, 2016 at 21:14
The checkboxes are from a db. So every new record has a new checkbox in the table. So there is only one id. I will update my code so you can see everything. — RoyBerner
– RoyBerner, Commented Apr 8, 2016 at 21:21

Sølve · Accepted Answer · 2016-04-08 21:30:26Z

1

$(document).ready(function() {
        var arr = <?php echo json_encode($checked); ?>;
        $.each(arr, function(index) {
            if (arr[index] == "1") {
                $("#mycheckbox").prop('checked', true);
            }
        });
    });

Untested & probably buggy. But this is the right approach you should take. Run the elements in a loop.

edited Apr 8, 2016 at 21:30

answered Apr 8, 2016 at 21:15

Sølve

4,5062 gold badges23 silver badges35 bronze badges

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

5 Comments

Sølve Over a year ago

Noticed @Rion Williams comment. He's right, if you have that markup, change your Id to a class

DinoMyte Over a year ago

$(this) would give you the object, not a value. You probably need arr[index] == "1". Also, not need to convert the arr into a jquery object using $(arr)

Sølve Over a year ago

You're right, @DinoMyte! Didn't think of that. Thanks for the correction!

DinoMyte Over a year ago

You can further improve the code : $("#mycheckbox").prop('checked',arr[index] == "1")

RoyBerner Over a year ago

I've updated my code again. But even with all your suggestions it won't work. I've used the id and the class without any result. Are there more suggestions? Thanks.

Ahmad ghoneim · Accepted Answer · 2016-04-08 21:48:14Z

0

if you have an auto increment id you can echo it inside the javascript code like this

<script type="text/JavaScript">
    $(document).ready(function(){

                  var arr<?php echo $row["id"]; ?> = <?php echo json_encode($checked); ?>;
                      $.each(arr<?php echo $row["id"]; ?>, function(index) {
                  if (arr<?php echo $row["id"]; ?>[index] == "1") {

    $(".check<?php echo $row["id"]; ?>").prop('checked', true);
                  }
                             });
            });
</script>


    <td><input type="checkbox" id="mycheckbox" name="checks" value="" class="check<?php echo $row["id"]; ?>"></td>
  </tr>
  <?php } ?>
</tbody>

if you re going to follow that code you should make a variable like this $id = $row["id"]; to type less

answered Apr 8, 2016 at 21:48

Ahmad ghoneim

9377 silver badges14 bronze badges

3 Comments

RoyBerner Over a year ago

I can't get it to work this way. How can i make my id auto increment? Now my id is just "mycheckbox". The number added makes it an other id. Or am i wrong?

Ahmad ghoneim Over a year ago

while loops it's content if you have 3 forms with the class = check<?php $row["id"]; ?> and in your database there is 3 id`s with the numbers 1 and 2 and 3 there will be 3 forms with check1 check2 check3 how to make the id auto increment here is a tutorial from w3schools w3schools.com/sql/sql_autoincrement.asp

RoyBerner Over a year ago

Updated my original post. Got it working with your suggestions Ahmed. I used the id instead of the class for the auto increment field.

Mateen Kajabadi · Accepted Answer · 2016-04-08 21:55:45Z

if you generate your table dynamically you can set your checkbox value there something like this .
JS :

 $(document).ready(function(){
// your arr from php
  var arr = [{'value' : 0 , 'name' :'Itme1' , 'description':'description1'},
            {'value' : 1 , 'name' :'Itme2' , 'description':'description2'},
            {'value' : 0 , 'name' :'Itme3' , 'description':'description3'},
            {'value' : 1 , 'name' :'Itme4' , 'description':'description4'}];

    var tableContent = '';
       $.map(arr, function (item) {
         checked=  (item.value) ? "checked" : "" ;
         tableContent+='<tr><td><input type="checkbox"'+checked+ '></td><td>' + item.name + '</td><td>' + item.description + '</td><td><input type="button" value="Edit" ></td></tr>';  
      });
    $("#myTbody").html(tableContent);
});

Example : http://jsfiddle.net/tg5op333/39/

Collectives™ on Stack Overflow

Set checkbox with jquery based on array value

3 Answers 3

5 Comments

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

3 Comments

Comments

Related