toggle checkboxes in a table after click function

0
votes

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>
2
javascriptjquerycheckboxtoggle
put your code on jsfiddle.net and it will be easy for us to help you. – Muthu Kumaran
just FYI: you can't have two functions assigned to click, in the first one you're referencing #table and checkboxes, in the second on the other hand it's checkboxes within #table (plus #table doesn't exist, .table does). You should use prop instead of attr, and you don't do it using ".false" or ".true". Anyway, working solution below. – Luke Jakimowicz

2 Answers

1
votes

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/

1
votes

When you're using attr() and prop() to retrieve an input's state, attr() refers to its default state (as written in the HTML), whereas prop() refers to its current state (which will change if you click on it, etc.).

When you're using them to set a new state, they do the same thing; but it's good to get in the habit of using prop() for setting 'checked' values.

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

This is just shorthand for writing

$('#toggle-all').click(function() {
    if ($(this).is(':checked')) {
        $('table input:checkbox').prop('checked', true);
    } else {
        $('table input:checkbox').prop('checked', false);
    }
});

because, through the nature of if-statements, if we're in the first branch, the expression $(this).is(":checked") is true anyway, and if we're in the second branch it will have been false. So, where we wrote 'true' and 'false', we could have written $(this).is(":checked") in both cases. After doing this, both branches say exactly the same thing, so we no longer need to write them in an if-statement.

$(this) refers to the element that was clicked (i.e. the checkbox). If you want to refer to the event in jQuery, you do:

$('.element').click(function(e) {
    // the variable e now refers to the event
});