javascript - How to hide a row if checkbox is not selected inside html table? - Stack Overflow

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=".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="moncheckbox" 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="moncheckbox" 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>

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./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="moncheckbox" 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="moncheckbox" 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!!!

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Aug 9, 2018 at 9:49 ADyson 62.2k1616 gold badges7979 silver badges9292 bronze badges asked Aug 9, 2018 at 8:54 Nida AminNida Amin 75511 gold badge99 silver badges3232 bronze badges 5

• I have updated my question – Nida Amin Commented Aug 9, 2018 at 8:59
• Can you make a Stack Snippet that demonstrates the problem? – Barmar Commented Aug 9, 2018 at 9:04
• 1 If you don't show code that demonstrates the failure, this question will probably get closed. – Barmar Commented Aug 9, 2018 at 9:13
• After generating html table, the user will check the desired checkboxes ftom the table. After that the user will click on the button with id allotBtn. On the click of this button, I need to check if checkbox is checked or not, if checkbox is not checked, then that row should be hidden. – Nida Amin Commented Aug 9, 2018 at 9:17
• I understand what you're trying to do. But you need to provide the code that shows how it's not working. – Barmar Commented Aug 9, 2018 at 9:19

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Try this:

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

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/jqabpru2/9/

Reference:

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

---

Or of course you can simplify it much more like in Viam's answer (https://stackoverflow./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/jqabpru2/10/

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'] .moncheckbox");
  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.

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?