チェックされた状態のチェックボックスの値を取得するためにテーブルを反復処理する方法は？

debugcn 投稿 Dev

チアゴル

入力がチェックされた状態の行の値にアクセスして取得する必要があります。

<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行を確認したとすると、これらの行の値だけにアクセスしようとします。

何が起こっているのか：またはすべての行の値にアクセスしている、または2つの行を選択すると、1つだけが表示されます。

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

生きて死ぬ

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

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]