选择仅第一列复选框jquery答案

【问题标题】：select Only first column checkbox jquery选择仅第一列复选框jquery
【发布时间】：2017-10-24 14:31:58
【问题描述】：

我正在尝试选择简单表格的第一列。这是我的代码，但它选择了所有出现在表格中的复选框。如何避免它。

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<table border="1" width="
300">
    <tr>
        <th>
            <input type="checkbox" id="selectAll" />
        </th>
        <th colspan="2">select all!</th>
    </tr>
    <tr>
        <td><input type="checkbox" id="1"/> </td>
        <td>test!</td>
        <td>hi!</td>
    </tr>

     <tr>
        <td><input type="checkbox" id="1"/> </td>
        <td>test!</td>
        <td>hi!</td>
    </tr>



     <tr>
        <td><input type="checkbox" id="1"/> </td>
        <td>test!</td>
        <td><input type="checkbox" id="1"/></td>
    </tr>

</table>

JQuery

<script>


    $('#selectAll').click(function(e){
        var table= $(e.target).closest('table');
        $('td input:checkbox',table).prop('checked',this.checked);
    });
    </script>

预期输出

这里选择了表格中的所有复选框，但我只想选择表格中的第一列复选框。请建议我更好的方法

【问题讨论】：

不要重复 ids，而是使用类！
您也不能以数字开头和 id。

标签： javascript jquery checkbox

【解决方案1】：

将复选框选择器更改为仅选择连续第一个 td 中的复选框：td:first-child。

$('#selectAll').click(function(e) {
  var table = $(e.target).closest('table');
  $('td:first-child input:checkbox', table).prop('checked', this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<table border="1" width="
300">
  <tr>
    <th>
      <input type="checkbox" id="selectAll" />
    </th>
    <th colspan="2">select all!</th>
  </tr>
  <tr>
    <td><input type="checkbox" id="1" /> </td>
    <td>test!</td>
    <td>hi!</td>
  </tr>

  <tr>
    <td><input type="checkbox" id="1" /> </td>
    <td>test!</td>
    <td>hi!</td>
  </tr>



  <tr>
    <td><input type="checkbox" id="1" /> </td>
    <td>test!</td>
    <td><input type="checkbox" id="1" /></td>
  </tr>

</table>

【讨论】：

【解决方案2】：

您需要在每行的第一个 td 应用更改。

这是工作代码

$('#selectAll').click(function(e){
        $(e.target).closest('table').find("tr td:first-child input:checkbox").prop('checked',this.checked)
        
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" width="
300" >
  <tr>
    <th>
      <input type="checkbox" id="selectAll" />
    </th>
    <th colspan="2">select all!</th>
  </tr>
  <tr>
    <td>
      <input type="checkbox" id="1" /> </td>
    <td>test!</td>
    <td>hi!</td>
  </tr>

  <tr>
    <td>
      <input type="checkbox" id="1" /> </td>
    <td>test!</td>
    <td>hi!</td>
  </tr>



  <tr>
    <td>
      <input type="checkbox" id="1" /> </td>
    <td>test!</td>
    <td>
      <input type="checkbox" id="1" />
    </td>
  </tr>

</table>

【讨论】：

【解决方案3】：

在下面使用。它选择每个 tr 下的第一个 td，然后选择它下面的复选框。

 $('tr td:first-child input[type=checkbox]',table).prop('checked',this.checked);

【讨论】：

【解决方案4】：

你想使用 td:first-child

  $('#selectAll').click(function(e){
        var table= $(e.target).closest('table');
		    table.find('td:first-child input:checkbox').prop('checked',this.checked);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" width="300">
    <tr>
        <th>
            <input type="checkbox" id="selectAll" />
        </th>
        <th colspan="2">select all!</th>
    </tr>
    <tr>
        <td><input type="checkbox" class="firstRow"/> </td>
        <td>test!</td>
        <td>hi!</td>
    </tr>

     <tr>
        <td><input type="checkbox" class="firstRow"/> </td>
        <td>test!</td>
        <td>hi!</td>
    </tr>



     <tr>
        <td><input type="checkbox" class="firstRow"/> </td>
        <td>test!</td>
        <td><input type="checkbox" id="1"/></td>
    </tr>

</table>

【讨论】：