选择仅第一列复选框jquery

Question

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

HTML

authenticationTokenFilter
    .setRequiresAuthenticationRequestMatcher(new OrRequestMatcher(                                                                                     
        new AntPathRequestMatcher("/rest/secured/**")                                                                                   
        , new AntPathRequestMatcher("/api/secured/**")                                                                            
     ));

JQuery

<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>

预期输出

此处所有复选框都在表格中选中，但我想在表格中仅选择第一列复选框。请建议我更好的方式

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

这是工作代码

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

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

Answer 4

您想使用td：first-child

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;