Question

我试图在列中实现类似于复选复选框的操作我有两个选择表中的所有复选框，选择一个将选择同一列的所有复选框。它是一个ASP.NET GridView。 Plunker function CheckHeaderCheckboxAll（obj，gridname）{ var objId = obj.id; var table = $（obj）.closest（＆＃39; table＆＃39;）; $（＆＃39;输入：复选框＆＃39;，表格。）（＆＃39;已检查＆＃39;，this.checked）; } 有人可以帮我这个吗？

Answer 1

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

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

Answer 2

删除点击事件。而是用类绑定它。

<input type="checkbox" value="" class="checkAll" data-class="class1" name="checkAll" id="ctl00_UserMasterContentPlaceHolder_grdUserDetails_ctl01_chkHeaderCheckbox"/>

提供您要检查的班级名称

<input type="checkbox" value="" class="class1" />

试试这个jquery：

$(".checkAll").click(function () {
     var datacls = $(this).attr('data-class');
     $('input:checkbox.'+datacls).not(this).prop('checked', this.checked);
});

Answer 3

@epascarello所说的可能更好。

我只是有一个小建议，那就是从同一个表本身找到复选框否则最终会选择页面所有表格中的复选框：

＆＃13;

function SelectAll(obj) {

  // find the index of column
  var table = $(obj).closest('table'); // find the current table
  var th_s = table.find('th'); // find/get all the <th> of current table
  var current_th = $(obj).closest('th'); // get current <th>

  // the value of n is "1-indexed", meaning that the counting starts at 1
  var columnIndex = th_s.index(current_th) + 1; // find index of current <th> within list of <th>'s

  console.log('The Column is = ' + columnIndex); // print the index for testing

  // select all checkboxes from the same column index of the same table
  table.find('td:nth-child(' + (columnIndex) + ') input').prop("checked", obj.checked);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>
      <input type="checkbox" onclick="SelectAll(this)" />
    </th>
    <th>Name</th>
    <th>
      <input type="checkbox" onclick="SelectAll(this)" />Is Active</th>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>John</td>
    <td>
      <input type="checkbox" name="isActive" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Tim</td>
    <td>
      <input type="checkbox" name="isActive" />
    </td>
  </tr>
</table>
<br/>
<h2>
Another Table<hr/>
</h2>
<table>
  <tr>
    <th>
      <input type="checkbox" onclick="SelectAll(this)" />
    </th>
    <th>Name</th>
    <th>
      <input type="checkbox" onclick="SelectAll(this)" />Is Active</th>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>John</td>
    <td>
      <input type="checkbox" name="isActive" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Tim</td>
    <td>
      <input type="checkbox" name="isActive" />
    </td>
  </tr>
</table>

＆＃13;

供参考：

nth-child选择所有父元素的第n个子元素。

Fiddle Here

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

3 个答案: