javascript - 如果表格列中的所有复选框均已选中，请选中标题复选框

Question

我的表格如下所示:

如果我选中/取消选中标题(创建、更新、删除)，它会选中/取消选中列复选框。这个功能运行良好。但我也想实现相反的目标。

例如，在页面加载时，如果“删除”列中的所有复选框均已选中，则还要检查标题。我如何实现这一目标？

JS

$("#objPermissionTableContent th input[type='checkbox']").on("change", function() {
  var cb = $(this),
    th = cb.closest('th'),
    col = th.index() + 1;
  $("#objPermissionTable td:nth-child(" + col + ") input").prop("checked", this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="objPermissionTableContent">
  <thead class="thead-light">
    <tr class="table-header">
      <th scope="col" class="border-top-0">
        <div class="form-group form-check mb-0">
          <input type="checkbox" class="form-check-input">
          <label class="form-check-label" for="objCreate">Create</label>
        </div>
      </th>
      <th scope="col" class="border-top-0">
        <div class="form-group form-check mb-0">
          <input type="checkbox" class="form-check-input">
          <label class="form-check-label" for="objUpdate">Update</label>
        </div>
      </th>
      <th scope="col" class="border-top-0">
        <div class="form-group form-check mb-0">
          <input type="checkbox" class="form-check-input">
          <label class="form-check-label" for="objRemove">Remove</label>
        </div>
      </th>
    </tr>
  </thead>
  <tbody class="disabled" id="objPermissionTable">
    <tr id="session">
      <td class="col-create" id="16">
        <div class="form-check"><input class="form-check-input" type="checkbox"></div>
      </td>
      <td class="col-update" id="17">
        <div class="form-check"><input class="form-check-input" type="checkbox"></div>
      </td>
      <td class="col-remove" id="18">
        <div class="form-check"><input class="form-check-input" type="checkbox" checked></div>
      </td>
    </tr>
    <tr id="scheduledmessage">
      <td class="col-create" id="265">
        <div class="form-check"><input class="form-check-input" type="checkbox"></div>
      </td>
      <td class="col-update" id="266">
        <div class="form-check"><input class="form-check-input" type="checkbox"></div>
      </td>
      <td class="col-remove" id="267">
        <div class="form-check"><input class="form-check-input" type="checkbox" checked></div>
      </td>
    </tr>
    <tr id="userpaymentmethod">
      <td class="col-create" id="277">
        <div class="form-check"><input class="form-check-input" type="checkbox"></div>
      </td>
      <td class="col-update" id="278">
        <div class="form-check"><input class="form-check-input" type="checkbox"></div>
      </td>
      <td class="col-remove" id="279">
        <div class="form-check"><input class="form-check-input" type="checkbox" checked></div>
      </td>
    </tr>
    <tr id="hw_message_prescription">
      <td class="col-create" id="268">
        <div class="form-check"><input class="form-check-input" type="checkbox"></div>
      </td>
      <td class="col-update" id="269">
        <div class="form-check"><input class="form-check-input" type="checkbox"></div>
      </td>
      <td class="col-remove" id="270">
        <div class="form-check"><input class="form-check-input" type="checkbox" checked></div>
      </td>
    </tr>
  </tbody>
</table>

<强> JS FIDDLE

Answer 1

在事件处理程序中添加 -

var checkedNum = $('#objPermissionTableContent tbody tr td').eq(col).find('input:checked').length;
var rowsNum = $('#objPermissionTableContent tbody tr').length;
if (checkedNum === rowsNum) {
  // check the header
}