Loop through table rows and return column value if checkbox checked

Question

How can i only get the values in the serial column if the checkbox is checked for that row using jquery? I currently can get the serial value but not sure how to add the checkbox condition.

Html:

<table id="usersTable">
   <thead>
     <tr>
       <th>Name</th>
       <th>Serial</th>
       <th>Status</th>
       <th>Enabled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
       <td>Name 1</td>
       <td>111111</td>
       <td>Online</td>
       <td><input type="checkbox"></td>
   </tr>
   <tr>
       <td>Name 2</td>
       <td>222222</td>
       <td>Offline</td>
       <td><input type="checkbox"></td>
   </tr>
   <tr>
       <td>Name 3</td>
       <td>333333</td>
       <td>Online</td>
       <td><input type="checkbox"></td>
   </tr>
  </tbody>
</table>

Jquery:

$('#usersTable > tbody  > tr').each(function (index, tr) {
      console.log($(this).find('td:nth-child(2)').text());

 });

https://stackoverflow.com/questions/2204250/check-if-checkbox-is-checked-with-jquery — Shreamy, Apr 30 '20 at 05:43
`console.log( $(this).find('input').is(':checked') ) `// return true or false — Roy Bogado, Apr 30 '20 at 05:47

score 1 · Accepted Answer · answered Apr 30 '20 at 05:51

There are a million ways to do this, but hopefully this is useful/helpful.

The gist of the solution is to loop over each row, which you did, then only log the text of the second column when the checkbox for that same row has been checked.

$('#usersTable > tbody  > tr').each(function() {
  const currentRow = $(this);
  const lastColumn = currentRow.find('td:last-child')

  if (lastColumn.find('input').attr('checked')) {
    console.log(currentRow.find('td:nth-child(2)').text());
  }
});

Loop through table rows and return column value if checkbox checked

1 Answers1