Как перебрать таблицу для получения значений флажка с проверенным состоянием?

Question

Мне нужно получить доступ и получить значения строк с проверенным состоянием ввода.

<table>
<thead>
<tr> <th>#</th> <th>Value 1</th> <th>Value 2</th> <th>Value 3</th> </tr>
</thead>
<tbody>
<tr>
  <td><input type='checkbox' name='1'></td> <td>1</td> <td>1</td> <td>1 </td>
</tr>
<tr>
  <td><input type='checkbox' name='2'></td> <td>2</td> <td>2</td> <td>2 </td>
</tr>
<tr>
  <td><input type='checkbox' name='3'></td> <td>3</td> <td>3</td> <td>3 </td>
</tr>
<tr>
  <td><input type='checkbox' name='4'></td> <td>4</td> <td>4</td> <td>4 </td>
</tr>
</tbody>

Предположим, что я проверил checkbox 1 and 2 первые две строки, я пытаюсь получить доступ только к значениям этих строк.

Что происходит: или к значениям всех строк обращаются, или когда я выбрал 2 строки, отображается только одна.

$("table tbody tr input:checkbox:checked").each(function(){
        console.log($("table tbody tr").html());
     }); 

Answer 1

Вам нужно использовать .closest() вместе с $(this)

$("table tbody tr input:checkbox:checked").each(function(){
   console.log($(this).closest("tr").html());
});

Рабочий образец: -

$("table tbody tr input:checkbox:checked").each(function(){
   console.log($(this).closest("tr").html());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Value 1</th>
      <th>Value 2</th>
      <th>Value 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type='checkbox' name='1' checked></td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td><input type='checkbox' name='2' checked></td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td><input type='checkbox' name='3'></td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
    </tr>
    <tr>
      <td><input type='checkbox' name='4'></td>
      <td>4</td>
      <td>4</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

Или Вам нужно использовать .parents() вместе с $(this)

$("table tbody tr input:checkbox:checked").each(function(){
   console.log($(this).parents("tr").html());
});

Рабочий образец: -

$("table tbody tr input:checkbox:checked").each(function(){
   console.log($(this).parents("tr").html());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Value 1</th>
      <th>Value 2</th>
      <th>Value 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type='checkbox' name='1' checked></td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td><input type='checkbox' name='2' checked></td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td><input type='checkbox' name='3'></td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
    </tr>
    <tr>
      <td><input type='checkbox' name='4'></td>
      <td>4</td>
      <td>4</td>
      <td>4</td>
    </tr>
  </tbody>
</table>