javascript - 选中同一列中的所有复选框

我正在尝试实现类似于Checking checkbox in column的方法

我有两个选择一个表中的所有复选框，选择一个将选择同一列的所有复选框。

它是一个ASP.NET GridView。 Plunker

function CheckHeaderCheckboxAll(obj, gridname) {
    var objId = obj.id;
    var table= $(obj).closest('table');
    $('td input:checkbox',table).prop('checked',this.checked);
}

有人可以帮我吗？

最佳答案

基本思想是选择单元格，获取索引，然后选择具有该索引的表的其他表单元格。

$("th input[type='checkbox']").on("change", function() {
   var cb = $(this),          //checkbox that was changed
       th = cb.parent(),      //get parent th
       col = th.index() + 1;  //get column index. note nth-child starts at 1, not zero
   $("tbody td:nth-child(" + col + ") input").prop("checked", this.checked);  //select the inputs and [un]check it
});

th { background-color: #CCC; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>
        <input type="checkbox">
      </th>
      <th>
        <input type="checkbox">
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        <input type="checkbox">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        <input type="checkbox">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        <input type="checkbox">
      </td>
    </tr>
  </tbody>
</table>

如果您想像使用内联事件处理程序那样执行操作，则代码看起来像

function CheckHeaderCheckboxAll(obj) {
   var cb = $(obj),           //checkbox that was changed
       th = cb.parent(),      //get parent th
       col = th.index() + 1;  //get column index. note nth-child starts at 1, not zero
   $("tbody td:nth-child(" + col + ") input").prop("checked", obj.checked);  //select the inputs and [un]check it
}