选择仅第一列复选框jquery

Question

I am trying to select first column of simple table. here is my code but it select all checkbox appear in table. how to avoid it.

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>

Expected Output

Here all checkbox selected in table but i want to select only first column checkbox in table. please suggest me better way

Answer 1

Change the checkbox selector to only select the checkboxes from the first td in a row: 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> 

Answer 2

You need to apply change on first td of every row.

Here is working code

 $('#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> 

Answer 3

Use below. It selects first td under each tr and then selects checkbox under it.

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

Answer 4

You want to use 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>