如果在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行，則上面的代碼會隨意隱藏行。

請幫忙！！！

Answer 1

嘗試這個：

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

Answer 2

您的代碼的問題是i在.each（）循環中開始將元素索引為0，而當您在CSS中調用nth-child時，第一個元素編號為1.因此，您隱藏的行始終為1 。

解決方法是簡單的-加1， i每次使用它來設置第n個孩子時間：

$(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://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());
    }
});

這是jsfiddle鏈接。

以下是如何使用jQuery檢查復選框是否已選中。

Answer 4

這個單行應該這樣做。 不需要循環。

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

此外，附加像這樣的點擊事件似乎超級奇怪 - 你究竟是什么將事件委托給文檔本身呢？ 整個事物是動態加載的嗎？