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行以上，则上面的代码会随意隐藏行。

请帮助！！！

Answer 1

尝试一下：

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

Answer 2

您的代码存在问题，即.each（）循环中的i开始将元素索引为0，而在CSS中调用nth-child时，第一个元素编号为1。您隐藏的行始终为1。

修复很简单-每次使用i设置nth-child时都要加1：

$(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/

参考：

当然，您也可以通过选择复选框的父行来简化它，就像在Viam的答案（https://stackoverflow.com/a/51762843/5947043）中那样。

再次归功于Viam，可以通过编写

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

相反。此方法的演示：http://jsfiddle.net/jqabpru2/10/

Answer 3

您要做的就是在click函数中编写以下代码，而不是当前的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());
    }
});

Here是jsfiddle链接。

Here是如何使用jQuery选中复选框的方法。

Answer 4

这种单线应该做到这一点。不需要循环。

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

此外，像这样附加click事件似乎很奇怪-无论如何，您到底将事件委托给文档本身是什么？整个过程是动态加载的吗？

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

4 个答案: