0

[すべて選択]チェックボックスが選択されている場合、tr行にクラスを追加しようとしていますが、[クラスの追加]を機能させることができないようです（すべてのチェックが解除されている場合は明らかに削除します）。個々の行を切り替えてクラスを追加/削除しますが、すべてのチェックで機能するようには見えません。

これが私のテーブルです：

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

これが私のjqueryコードです：

//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");
});
4

2 に答える 2

2

IDは繰り返されるため、ここでは使用できません。class="checkbox"代わりに、の代わりに次のようなクラスを使用しid="checkbox"てください。

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

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

ここでテストできます。また、のchange代わりにを使用clickして状態を正しくし、を使用しclosest()てそのセレクターの最も近い親を取得し、.change()変更するすべてのチェックボックスを呼び出して、行クラスが正しく更新されるようにすることにも注意してください。

于 2010-10-21T21:50:27.923 に答える
1

http://beckelman.net/2008/11/18/select-all-checkboxes-in-a-table-column-with-and-without-jquery-plugin-demo/

<script type="text/javascript">
$(document).ready(function() {
    $("#tableOne thead tr th:first input:checkbox").click(function() {
        var checkedStatus = this.checked;
        $("#tableOne tbody tr td:first-child input:checkbox").each(function() {
            this.checked = checkedStatus;
        });
    });

});
</script>
于 2012-04-27T11:02:25.870 に答える