JQuery проверить все флажки и добавить класс в строках? - PullRequest
Новая
       43

JQuery проверить все флажки и добавить класс в строках?

0 голосов
/ 22 октября 2010

Я пытаюсь добавить класс в мои строки tr, если установлен флажок select all, но я не могу заставить работать класс add (а затем, очевидно, удалить их, если флажок all все не выбран) Я использую переключатель в каждой отдельной строке для добавления / удаления класса, но не могу заставить его работать для проверки всех.

Вот мой стол: 

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

Ответы [ 2 ]

2 голосов
/ 22 октября 2010

Вы не можете использовать 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() во всех флажках, которые вы меняете, поэтому их класс строки обновляется правильно.

1 голос
/ 27 апреля 2012

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