如何遍历表以获取具有选中状态的复选框的值？

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>