仅选中带有选中的checbox的单元格

Question

下面的代码选择了我不想要的第一列。我想选择only cells with checkboxes checked。

我希望仅在css中选择$("#mytable tr td:nth-child(1)")。不想在函数体中使用find或处理它。

$("#mytable tr td:nth-child(1)").each(function() {
    $(this)
      .css("background-color", "red")
      .html();
  });

表格

<table id="mytable">
        <tr>
            <th>Column 0</th>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
            <th>Column 5</th>
        </tr>
        <tr style="text-align: center">
            <td>
                <input type="checkbox" />
                <input class="idField" type="hidden" value="4" />
            </td>
            <td>Row 1 col 1</td>
            <td>Row 1 col 2</td>
            <td>Row 1 col 3</td>
            <td>Row 1 col 4</td>
            <td>Row 1 col 5</td>
        </tr>
        <tr style="text-align: center">
            <td>
                <input type="checkbox" checked />
                <input class="idField" type="hidden" value="6" />
            </td>
            <td>Row 2 col 1</td>
            <td>Row 2 col 2</td>
            <td>Row 2 col 3</td>
            <td>Row 2 col 4</td>
            <td>Row 2 col 5</td>
        </tr>
        <tr style="text-align: center">
            <td>
                <input type="checkbox" />
                <input class="idField" type="hidden" value="7" />
            </td>
            <td>Row 3 col 1</td>
            <td>Row 3 col 2</td>
            <td>Row 3 col 3</td>
            <td>Row 3 col 4</td>
            <td>Row 3 col 5</td>
        </tr>
        <tr style="text-align: center">
            <td>
                <input type="checkbox" />
                <input class="idField" type="hidden" value="9" />
            </td>
            <td>Row 4 col 1</td>
            <td>Row 4 col 2</td>
            <td>Row 4 col 3</td>
            <td>Row 4 col 4</td>
            <td>Row 4 col 5</td>
        </tr>
        <tr style="text-align: center">
            <td>
                <input type="checkbox" checked/>
                <input class="idField" type="hidden" value="10" />
            </td>
            <td>Row 5 col 1</td>
            <td>Row 5 col 2</td>
            <td>Row 5 col 3</td>
            <td>Row 5 col 4</td>
            <td>Row 5 col 5</td>
        </tr>
    </table>

Answer 1

可以使用has()或:has()选择器以及:checkbox＆amp; :checked个选择器。也不需要使用each，因为jQuery已经执行了内部each循环

＆＃13;

＆＃13;

 $("#mytable tr td:nth-child(1)")
          .has(':checkbox:checked')
          .css("background-color", "red")

＆＃13;

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

<table id="mytable">
  <tr>
    <th>Column 0</th>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
    <th>Column 4</th>
    <th>Column 5</th>
  </tr>
  <tr style="text-align: center">
    <td>
      <input type="checkbox" />
      <input class="idField" type="hidden" value="4" />
    </td>
    <td>Row 1 col 1</td>
    <td>Row 1 col 2</td>
    <td>Row 1 col 3</td>
    <td>Row 1 col 4</td>
    <td>Row 1 col 5</td>
  </tr>
  <tr style="text-align: center">
    <td>
      <input type="checkbox" checked />
      <input class="idField" type="hidden" value="6" />
    </td>
    <td>Row 2 col 1</td>
    <td>Row 2 col 2</td>
    <td>Row 2 col 3</td>
    <td>Row 2 col 4</td>
    <td>Row 2 col 5</td>
  </tr>
  <tr style="text-align: center">
    <td>
      <input type="checkbox" />
      <input class="idField" type="hidden" value="7" />
    </td>
    <td>Row 3 col 1</td>
    <td>Row 3 col 2</td>
    <td>Row 3 col 3</td>
    <td>Row 3 col 4</td>
    <td>Row 3 col 5</td>
  </tr>
  <tr style="text-align: center">
    <td>
      <input type="checkbox" />
      <input class="idField" type="hidden" value="9" />
    </td>
    <td>Row 4 col 1</td>
    <td>Row 4 col 2</td>
    <td>Row 4 col 3</td>
    <td>Row 4 col 4</td>
    <td>Row 4 col 5</td>
  </tr>
  <tr style="text-align: center">
    <td>
      <input type="checkbox" checked/>
      <input class="idField" type="hidden" value="10" />
    </td>
    <td>Row 5 col 1</td>
    <td>Row 5 col 2</td>
    <td>Row 5 col 3</td>
    <td>Row 5 col 4</td>
    <td>Row 5 col 5</td>
  </tr>
</table>



   

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用.has("input[type=checkbox]:checked")

＆＃13;

＆＃13;

$("#mytable tr td:nth-child(1)").has("input[type=checkbox]:checked").each(function() {
  $(this)
    .css("background-color", "red");
});

＆＃13;

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

<table id="mytable">
  <tr>
    <th>Column 0</th>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
    <th>Column 4</th>
    <th>Column 5</th>
  </tr>
  <tr style="text-align: center">
    <td>
      <input type="checkbox" />
      <input class="idField" type="hidden" value="4" />
    </td>
    <td>Row 1 col 1</td>
    <td>Row 1 col 2</td>
    <td>Row 1 col 3</td>
    <td>Row 1 col 4</td>
    <td>Row 1 col 5</td>
  </tr>
  <tr style="text-align: center">
    <td>
      <input type="checkbox" checked />
      <input class="idField" type="hidden" value="6" />
    </td>
    <td>Row 2 col 1</td>
    <td>Row 2 col 2</td>
    <td>Row 2 col 3</td>
    <td>Row 2 col 4</td>
    <td>Row 2 col 5</td>
  </tr>
  <tr style="text-align: center">
    <td>
      <input type="checkbox" />
      <input class="idField" type="hidden" value="7" />
    </td>
    <td>Row 3 col 1</td>
    <td>Row 3 col 2</td>
    <td>Row 3 col 3</td>
    <td>Row 3 col 4</td>
    <td>Row 3 col 5</td>
  </tr>
  <tr style="text-align: center">
    <td>
      <input type="checkbox" />
      <input class="idField" type="hidden" value="9" />
    </td>
    <td>Row 4 col 1</td>
    <td>Row 4 col 2</td>
    <td>Row 4 col 3</td>
    <td>Row 4 col 4</td>
    <td>Row 4 col 5</td>
  </tr>
  <tr style="text-align: center">
    <td>
      <input type="checkbox" checked/>
      <input class="idField" type="hidden" value="10" />
    </td>
    <td>Row 5 col 1</td>
    <td>Row 5 col 2</td>
    <td>Row 5 col 3</td>
    <td>Row 5 col 4</td>
    <td>Row 5 col 5</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

您也可以为实时更改定义此事件侦听器

$("input[type=checkbox]").on('click', function(itm) {
  $("#mytable tr td:nth-child(1)").has("input[type=checkbox]:not(:checked)").each(function() {
    $(this)
      .css("background-color", "white");
  });
  $("#mytable tr td:nth-child(1)").has("input[type=checkbox]:checked").each(function() {
    $(this)
      .css("background-color", "red");
  });
})