How to populate checkbox with the array jquery

Question

Im with some problems about how to populate some checkboxes with the values that are in newArray[] Here it goes the code:
Html:

<form id="myForm">
 <div id ="checkboxes">
 <table>
 <tr>
 <td>
 <label class="checkbox">
 <input type="checkbox" name="my_opt[]" value="1"> 
 Total
 </label>
 </td>
 <td>
 <label class="checkbox">
 <input type="checkbox" name="my_opt[]" value="2"> 
 Male
 </label>
 </td>
 </tr>
 <tr>
 <td>
 <label class="checkbox">
 <input type="checkbox" name="my_opt[]" value="3"> 
 Female
 </label>
 </td>
 <td>
 <label class="checkbox">
 <input type="checkbox" name="my_opt[]" value="4">
 Age
 </label>
 </td>
 </tr>
 <tr>
 <td>
 <label class="checkbox">
 <input type="checkbox" name="my_opt[]" value="5">
 Score
 </label>
 </td>
 </tr>
 </table>
 </div>
 <input id='my_opt' type='hidden' name='my_opt[]' />
</form>

script:

<script>
 //checkboxes
 var check_box_values = $('#myForm [type="checkbox"]:not(:checked)').map(function () {
 return parseInt(this.value);
 }).get();
 (...)
 j = j + 1;
 //creating new button
 $("#save").append(
 $("<input type=button id=saved"+j+">").click(function() {
 (...)
 }).text("Chart"+j)
 );
 //change the checkboxes to new values from array
 var newArray = [];
 newArray[4] = check_box_values; //i want that to be [4]
 //click on new button
 $('#saved'+j).click(function() {
 $('#checkboxes').val(newArray[4]);
 });
</script>

This is not working, and error seems to be in $('#checkboxes').val(newArray[4]);. What I want is that checkboxes turn checked based on data of newArray[4]; eg. if newArray[4] = [2,3,4]

Im missing the syntax :s could you help me ?

• Diodeus - James MacFarlane: Unreleated but important: Use a styled unordered list, not a table for this type of layout.
• devnull69: I don't understand. In check_box_values you collect only checkbox values of unchecked checkboxes, but with this list now you want to determine which checkboxes to check? So you want to check the unchecked checkboxes only? Why not just check all checkboxes in the first place?
• noneJavaScript: @devnull69, you are right. Can i check all checkboxes and then see which are checked and which dont ?
• devnull69: what? If you check all checkboxes, none of them weren't checked (i.e. all of them were checked)
• Dennis Traub: If you solved the problem please post the solution as an answer. Then everybody else with a similar question can see how it works.

Answer 1

I think this is some how what you are tying to achieve .

Here is the live example

Here is the code using jQuery:

$(function(){
var $checkboxes = $('#checkboxes').find('input[type=checkbox]'),
 times = 0;
function checkBoxes() {
 var checked = [],
 unchecked = [];
 $checkboxes.each(function (index) {
 if ($(this).is(':checked')) {
 checked.push(index);
 } else {
 unchecked.push(index);
 }
 });
 $('#checkboxes').append('<a href="#" class="btn">Check boxes [' + checked.toString() + ']</a>')
 .find('a.btn:last')
 .data('check', checked)
 .on('click', function () {
 var data = $(this).data('check');
 console.log(data, $(this).index());
 $checkboxes.attr('checked', false);
 $checkboxes.each(function (index) {
 if (data.indexOf(index) >= 0) {
 $(this).attr('checked', true);
 }
 });
 });
}
setInterval(checkBoxes, 3000);
});