如何在HTML表格中，如果复选框未被选中，则隐藏行？

Question

我在HTML表格中动态创建了复选框，就像下面的代码一样。而且我试图使用以下代码来隐藏未选中复选框的行，在另一个按钮的click()函数中执行。

$(document).on("click", "#allotBtn", function() {
  $('#studentListBody tr [type="checkbox"]').each(function(i, chk) {
    if (!chk.checked) {
      $("#studentList tr:nth-child(" + i + ")").css("display", "none");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody id="studentListBody">
  <tr role="row" class="odd">
    <td class="centeralign hideFirstTD sorting_1">
      <div class="checkbox checkbox-success ">
        <input class="commoncheckbox" type="checkbox" id="studentId_-5ab87edaff24ae1204000857" name="studentId_-5ab87edaff24ae1204000857" value="5ab87edaff24ae1204000857">
        <label></label>
      </div>
    </td>
    <td class="  align-middle ">
      <img alt="image" class="img-circle listProfilePicture" src="../img/studentcap.png">
    </td>
    <td>Raja Mir</td>
    <td>7th</td>
    <td>Male</td>
    <td>Active</td>
    <td>2016</td>
  </tr>

  <tr role="row" class="even">
    <td class="centeralign hideFirstTD sorting_1">
      <div class="checkbox checkbox-success ">
        <input class="commoncheckbox" type="checkbox" id="studentId_-5ab8d5f8ff24ae120400085f" name="studentId_-5ab8d5f8ff24ae120400085f" value="5ab8d5f8ff24ae120400085f">
        <label></label>
      </div>
    </td>
    <td class="  align-middle ">
      <img alt="image" class="img-circle listProfilePicture" src="../img/studentcap.png">
    </td>
    <td>Omer Jan</td>
    <td>4th</td>
    <td>Male</td>
    <td>Active</td>
    <td>2018</td>
  </tr>
</tbody>

如果表格中有超过3行，上述代码会随意隐藏行。

求助！！！

- Nida Amin

---

我已经更新了我的问题。 - Nida Amin

你能否制作一个Stack Snippet来演示这个问题？ - Barmar

如果您不展示能够证明问题的代码，这个问题很可能会被关闭。 - Barmar

生成 HTML 表格后，用户将从表格中勾选所需的复选框。之后，用户将单击 ID 为 allotBtn 的按钮。在单击此按钮时，我需要检查复选框是否已被选中，如果未选中，则应隐藏该行。 - Nida Amin

我明白你想做什么。但是你需要提供代码，以显示它的错误之处。 - Barmar

Answer 1

试试这个：

$("#allotBtn").click(function(){
    $('#studentListBody tr [type="checkbox"]:checked').closest("tr").hide();
});

- Vahid Moradi

---

他似乎想要一个单独的“筛选”按钮，而不是在每次点击时隐藏每一行。 - Barmar

我已经更新了我的问题...这不是我想要实现的。请检查一下我的问题。 - Nida Amin

请确保使用 <table> 标签将 <tbody> 包含起来。 - Vahid Moradi

Answer 2

您的代码存在问题，就是在.each()循环中 i 开始对元素进行索引时从0开始，但是当您在CSS中调用nth-child时，第一个元素被编号为1。因此，您要隐藏的行总是有偏差的1个。

修复方法很简单-每次使用它设置nth-child时将1添加到 i 中即可：

$(document).on("click", "#allotBtn", function () {
    $('#studentListBody tr [type="checkbox"]').each(function(i, chk) {
         if (!chk.checked) {
             $("#studentListBody tr:nth-child("+(i+1)+")").css("display", "none");
         }
    });
});

工作演示：http://jsfiddle.net/jqabpru2/9/

参考：

• https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
• https://api.jquery.com/each/

---

当然，您也可以像Viam的答案（https://dev59.com/a63la4cB1Zd3GeqPOIRB#51762843）中那样简化它，通过找到复选框的父行来完成。

再次感谢Viam，可以通过编写以下代码来实现：

$("#allotBtn").click(function(){
    $('#studentListBody tr [type="checkbox"]:checked').closest("tr").hide();
});

相反，可以使用CSS flexbox来实现这一点。以下是此方法的演示：http://jsfiddle.net/jqabpru2/10/

- ADyson

---

另一种解决方案是使用.eq(i)。这也从0开始。 - Barmar

Answer 3

只需在点击函数中编写以下代码，而不是您当前的jQuery代码：

var checkList = $("tr[role='row'] .commoncheckbox");
  checkList.each(function(){
    $($(this).closest("tr[role='row']").hide());
    if($(this).is(":checked")){
      $($(this).closest("tr[role='row']").show());
    }
});

这里是有关此问题的jsfiddle链接Here。

以下是如何使用jQuery检查复选框是否被选中的方法Here。

- Code_Ninja

Answer 4

这个一行代码就可以完成。不需要循环。

$(function() {
    $(document).on("click", "#allotBtn", function() {
      $('#studentListBody input[type=checkbox]:not(:checked)').closest('tr').hide();
    });
});

此外，像这样附加点击事件似乎非常奇怪 - 你到底将事件委托给文档本身做什么呢？整个东西是动态加载的吗？

- JF it