Question

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

我想在单击全选复选框时一次更改所有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中添加一个全选复选框，然后只需查看对它的更改。这是一个粗略准备的样本。

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

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

＆＃13;

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

＆＃13;

.warning {
  background-color: #ccc
}

＆＃13;

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

＆＃13;

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

2 个答案: