javascript - 在每个选择复选框中找到第一个 td

Question

我有一个表格如下:

<table id="testTable" class="mainTable">
    <thead>
        <tr>
            <th>Title</th>
            <th>
                Select All
                <input type="checkbox" id="select_all">
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td><input type="checkbox" class="checkbox"></td>
        </tr>
        <tr>
            <td>Cell 2</td>
            <td><input type="checkbox" class="checkbox"></td>
        </tr>
        <tr>
            <td>Cell 3</td>
            <td><input type="checkbox" class="checkbox"></td>
        </tr>
        <tr>
            <td>Cell 4</td>
            <td><input type="checkbox" class="checkbox"></td>
        </tr>
    </tbody>
</table>

目前我的JS代码会从表格中获取所有first td元素，不管checkbox如何，代码如下:

$("#testTable tr").each(function() {
    firsttd += $(this).find("td:first").html() + "\n";
});

但是，我需要对此进行修改，以便我的 JS 代码仅获取选中复选框行的第一个 td 元素。

Answer 1

您可以直接在选择器上添加条件，例如:

$("#testTable :checkbox:checked").each(function() {
    firsttd += $(this).closest('tr').find("td:first").html() + "\n";
});

或者如果你真的需要循环并且因为你使用的是 jQuery 你可以使用 .is(':checked') 比如:

if ( $(this).find(':checkbox').is(':checked') ) 
{
     firsttd += $(this).find("td:first").html() + "\n";
}

希望这对您有所帮助。

var firsttd = "";

$("#testTable :checkbox:checked").each(function() {
  firsttd += $(this).closest('tr').find("td:first").html() + "\n";
});

console.log(firsttd);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="testTable" class="mainTable" border=1>
  <thead>
    <tr>
      <th>Title</th>
      <th>Select All <input type="checkbox" id="select_all"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td><input type="checkbox" class="checkbox" checked></td>
    </tr>
    <tr>
      <td>Cell 2</td>
      <td><input type="checkbox" class="checkbox"></td>
    </tr>
    <tr>
      <td>Cell 3</td>
      <td><input type="checkbox" class="checkbox" checked></td>
    </tr>
    <tr>
      <td>Cell 4</td>
      <td><input type="checkbox" class="checkbox"></td>
    </tr>
  </tbody>