views:

20

answers:

1

hi all, I am trying to add a class to my tr rows if the select all checkbox has been selected, but I can't seem to get the add class to work (and then obviously remove them if check all has been deselected), I am using toggle on each individual row to add/remove the class, but can't seem to get it working for the check all.

Here's my table:

<form>
<table cellspacing="0" cellpadding="0" class="tablesorter" id="table">
  <thead>
    <tr>
      <th valign="middle" align="left" class="filebox"><input type="checkbox" id="checkall" name="checkall"></th>
      <th valign="middle" align="left" class="header filename"><strong>Filename</strong></th>
      <th valign="middle" align="left" class="header filesize"><strong>Size</strong></th>
      <th valign="middle" align="left" class="header filedate"><strong>Date</strong></th>
    </tr>
  </thead>
  <tbody class="file">
    <tr>
      <td valign="middle" align="left" class="filebox"><input type="checkbox" id="checkbox" name="checkbox"></td>
      <td valign="middle" align="left" class="filename">Search48.png</td>
      <td valign="middle" align="left" class="filesize">6 KB</td>
      <td valign="middle" align="left" class="filedate">21/10/2010</td>
    </tr>
    <tr>
      <td valign="middle" align="left" class="filebox"><input type="checkbox" id="checkbox" name="checkbox"></td>
      <td valign="middle" align="left" class="filename">shopping_trolley48.png</td>
      <td valign="middle" align="left" class="filesize">3 KB</td>
      <td valign="middle" align="left" class="filedate">21/10/2010</td>
    </tr>
  </tbody>
</table>
</form>

Here's my jquery code:

//check all checkboxes
$("#checkall").click(function () {
  $(this).parents("#table:eq(0)").find(":checkbox").attr("checked", this.checked);
});

//add highlight to tr
$("#checkbox").click(function() {
  $(this).parent().parent().toggleClass("highlight");
});
+1  A: 

You cant use an ID here since it's repeated, instead use a class like class="checkbox" instead of the id="checkbox", like this:

$("#checkall").change(function () {
  $(this).closest("table").find(":checkbox").attr("checked", this.checked).change();
});

$(".checkbox").change(function() {
  $(this).closest('tr').toggleClass("highlight", this.checked);
});

You can test it out here. Also note the use of change instead of click so the state is correct, the use of closest() to get the nearest parent of that selector, and calling .change() on all the checkboxes you're changing, so their row class gets updated correctly.

Nick Craver
thank you, but it's not adding the new classes for the rows on check all
SoulieBaby
@Soulie - did you add the `.change()` on the second line in my code above? :) Check the demo to see it working.
Nick Craver
and i'm also getting an error of : "too much recursion"
SoulieBaby
$("#checkall").change(function () { $(this).closest("table").find(":checkbox").attr("checked", this.checked).change(); }); $(".check").change(function() { $(this).closest("tr").toggleClass("highlight", this.checked); });
SoulieBaby
oh wait, i didnt change 1 class name.. ugh now it works! Thank you so much for your help!! :)
SoulieBaby