Set checkbox with jquery based on array value - php

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>

Answer 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.

Answer 2

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

Answer 3

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/