如果在表列中选中了所有复选框，请选中标题复选框

时间：2018-07-23 12:18:50

标签： javascript jquery

我的桌子看起来像这样：

enter image description here

如果我选中/取消选中标题（创建，更新，删除），它将选中/取消选中列复选框。此功能工作正常。但是我也想做到相反。

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

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

2 个答案:

答案 0 :(得分：2)

在事件处理程序内部添加-

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

答案 1 :(得分：1)

尝试以下方式：

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

$(".form-check-input").on("change", function (e) {
  var pos = $(this).parent().parent().index();
  var isTrue = true;
  $("tr").find('td:eq('+pos+')').each(function(){
    if(!$(this).find('.form-check-input').prop('checked'))
      isTrue = false;
  });
  if(isTrue)
    $('tr th:eq('+pos+')').find('.form-check-input').prop('checked', true);
  else
    $('tr th:eq('+pos+')').find('.form-check-input').prop('checked', false);
});
$("tr>td .form-check-input").trigger('change');
<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>

相关问题
最新问题