Question

I need this function to work after the page is loaded.
The error is a missing ; before statement error on the true line.
Also when the checkbox toggle-all is clicked as “checked” I want it to mark the class in the table checkall checked as true and when toggle-all checkbox is clicked again, mark all checked boxes in the table false.
It seems almost right but some error with the brackets.

$(document).ready(function()  {
     $('#toggle-all, input:checkbox').click(
     function () {
        $('#table, :checkbox').attr(':checked','checked').true);
     },function(){
        $('#table :checkbox').attr(':checked').false);
     }
  );
});



 <section id="main">
     <form id="task-list"> <input id="toggle-all" name="toggle-all" type="checkbox" /> 
      </form>
 </section>

 <table class="table" >
     <tr>
         <td><input type="checkbox" class="checkall"  />item.todo </td>
         <td> item.name</td><td>
     </tr>
......  more rows
 </table>

Answer 1

Simple solution:

$(document).ready(function() {

    $("#toggle-all").click(function() {
        $(".table input:checkbox").each(function() {
            $(this).prop("checked", !$(this).prop("checked"));
        });
    });

});

A bit more bullet-proof (always toggling all checkboxes together):

$(document).ready(function() {

    $("#toggle-all").click(function() {
        $(".table input:checkbox").prop("checked", $(this).prop("checked"));
    });

});​

Demo: http://jsfiddle.net/Ck43Z/1/