单击（全选）复选框更改多个表行类

Question

我有一个包含多行的表，当单击全选复选框时，我想在每一行的 tr 中添加和删除一个类

当单击全选复选框时，我想一次更改所有 tr 类行（添加和删除 tr 类）。我有以下 javascript 可以在单击顶部复选框时选择所有复选框，并在单击 tr 行中的复选框时更改单行类

我需要单击顶部复选框时选中所有复选框的功能，并且表格行中的 tr 类也同时更改，就像下面的突出显示行 javascript

这是我的复选框的 javascript，当单击该复选框时会选择所有其他复选框

当单击单个复选框时，它还会突出显示表格行

<script type="text/javascript">
$(function () {
    $('.chk_boxes').click(function () {
        $('.chk_boxes1').prop('checked', this.checked);
    });

    // Highlight row when checkbox is checked
    $('.table-inbox').find('tr > td:first-child').find('input[type=checkbox]').on('change', function () {
        if ($(this).is(':checked')) {
            $(this).parents('tr').addClass('warning');
        }
        else {
            $(this).parents('tr').removeClass('warning');
        }
    });
});

以及下面的html表格

<div class="btn-group navbar-btn pl-20">
    <input class="chk_boxes" type="checkbox">
</div>

<div class="btn-group navbar-btn">
    <button type="submit" onclick="return confirm('Are you sure you want to delete the messages?');" class="btn btn-default"><span class="position-right">Delete</span></button>
</div>

<table>
<tbody>

    <tr class="">
        <td class="table-inbox-checkbox">
            <div class="checker"><span><input class="chk_boxes1" value="5" name="id[]" type="checkbox"></span></div>
        </td>
        <td class="table-inbox-image">
            <span class="btn bg-t btn-rounded btn-icon btn-xs">
                <span class="letter-icon">T</span>
            </span>
        </td>
        <td class="table-inbox-name"><a href="#"><div class="letter-icon-title">test user3</div></a></td>
        <td class="table-inbox-message">
            <div class="table-inbox-subject"> <a href="#" class="text-primary">message number 1</a></div>
            <span class="table-inbox-preview">hi are you ok for a something</span>
        </td>
        <td class="table-inbox-attachment"></td>
        <td class="table-inbox-time"> 21st Mar, 20:04 </td>
    </tr>

    <tr class="">
        <td class="table-inbox-checkbox rowlink-skip">
            <div class="checker"><span><input class="chk_boxes1" value="6" name="id[]" type="checkbox"></span></div>
        </td>
        <td class="table-inbox-image">
            <span class="btn bg-t btn-rounded btn-icon btn-xs">
                <span class="letter-icon">T</span>
            </span>
        </td>
        <td class="table-inbox-name"><a href="#"><div class="letter-icon-title">test user5</div></a></td>
        <td class="table-inbox-message">
            <div class="table-inbox-subject"> <a href="#" class="text-primary">Message number 2</a></div>
            <span class="table-inbox-preview">i am sending this message to you</span>
        </td>
        <td class="table-inbox-attachment"></td>
        <td class="table-inbox-time"> 20st Mar, 21:04 </td>
    </tr>

</tbody>
</table>

Answer 1

如果我理解正确，您只需在单击顶部复选框时抓取所有表格行并在它们上切换一个类。

$(function () {
    $('.chk_boxes').click(function () {
        $('.chk_boxes1').prop('checked', this.checked);
        $('tbody > tr').toggleClass('tr', this.checked);
    });

    // Highlight row when checkbox is checked
    $('.table-inbox').find('tr > td:first-child').find('input[type=checkbox]').on('change', function () {
        if ($(this).is(':checked')) {
            $(this).parents('tr').addClass('warning');
        }
        else {
            $(this).parents('tr').removeClass('warning');
        }
    });
});

Answer 2

您需要添加一个全选复选框，可能是在thead 中，然后只需注意对其进行的更改。这是一个粗略的准备好的示例。

这是一个问题！如果您以编程方式设置复选框，则您还没有触发该复选框上的 change() 事件。我已经编辑了代码来为你做这件事，只需在我刚刚检查过的所有元素上调用 trigger() 即可。希望这会有所帮助！

编辑：清理了 selectAll 代码 -- 而不是使用 if()，我只是将所有后续复选框的状态设置为 selectAll 复选框的状态。

$(function() {
  $('.chk_boxes').click(function() {
    $('.chk_boxes1').prop('checked', this.checked);
  });

  // Highlight row when checkbox is checked
  $('.table-inbox').find('tr > td:first-child').find('input[type=checkbox]').on('change', function() {
    if ($(this).is(':checked')) {
      $(this).parents('tr').addClass('warning');
    } else {
      $(this).parents('tr').removeClass('warning');
    }
  });

  $("#checkAll").on("click", function() {
      $("tbody input[type='checkbox']")
        .prop("checked", $(this).prop("checked") )
        .trigger("change");
  })
});

.warning {
  background-color: #ccc
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group navbar-btn">
  <button type="submit" onclick="return confirm('Are you sure you want to delete the messages?');" class="btn btn-default"><span class="position-right">Delete</span></button>
</div>

<table class="table-inbox">
  <thead>
    <td><label for="checkAll">Check All: </label><input type="checkbox" id="checkAll"></td>
  </thead>
  <tbody>

    <tr class="">
      <td class="table-inbox-checkbox">
        <div class="checker"><span><input class="chk_boxes1" value="5" name="id[]" type="checkbox"></span></div>
      </td>
      <td class="table-inbox-image">
        <span class="btn bg-t btn-rounded btn-icon btn-xs">
                <span class="letter-icon">T</span>
        </span>
      </td>
      <td class="table-inbox-name">
        <a href="#">
          <div class="letter-icon-title">test user3</div>
        </a>
      </td>
      <td class="table-inbox-message">
        <div class="table-inbox-subject"> <a href="#" class="text-primary">message number 1</a></div>
        <span class="table-inbox-preview">hi are you ok for a something</span>
      </td>
      <td class="table-inbox-attachment"></td>
      <td class="table-inbox-time"> 21st Mar, 20:04 </td>
    </tr>

    <tr class="">
      <td class="table-inbox-checkbox rowlink-skip">
        <div class="checker"><span><input class="chk_boxes1" value="6" name="id[]" type="checkbox"></span></div>
      </td>
      <td class="table-inbox-image">
        <span class="btn bg-t btn-rounded btn-icon btn-xs">
                <span class="letter-icon">T</span>
        </span>
      </td>
      <td class="table-inbox-name">
        <a href="#">
          <div class="letter-icon-title">test user5</div>
        </a>
      </td>
      <td class="table-inbox-message">
        <div class="table-inbox-subject"> <a href="#" class="text-primary">Message number 2</a></div>
        <span class="table-inbox-preview">i am sending this message to you</span>
      </td>
      <td class="table-inbox-attachment"></td>
      <td class="table-inbox-time"> 20st Mar, 21:04 </td>
    </tr>

  </tbody>
</table>