How to hide a row if checkbox is not selected inside html table?

Question

I have dynamically created checkboxes inside HTML table like given in the following code. And I am trying to hide the rows whose checkbox is not checked by using below lines of code on the another button click() function.

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

If there are more than 3 rows in the table, the above code hides the rows haphazardly.

Please help!!!

Answer 1

Try this:

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

Answer 2

The issue with your code is that i in the .each() loop starts indexing the elements at 0, whereas when you call nth-child in CSS, the first element is numbered as 1. Therefore the row you hide is always off by 1.

The fix is simple - add 1 to i each time you use it to set nth-child:

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

Working demo: http://jsfiddle.net/jqabpru2/9/

Reference:

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

---

Or of course you can simplify it much more like in Viam's answer ( https://stackoverflow.com/a/51762843/5947043 ) by finding the row which is the parent of the checkbox instead.

Again, credit to Viam, this can be done by writing

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

instead. Demo of this approach: http://jsfiddle.net/jqabpru2/10/

Answer 3

All you have to do is write the following code instead of your current jQuery code in a click function:

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 is jsfiddle link on this.

Here is how to check a checkbox is checked or not using jQuery.

Answer 4

This one-liner should do it. No need for loops.

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

Also, attaching the click event like this seems super strange - what exactly are you delegating the event to the document itself for anyway? Is the whole thing loaded dynamically?