Hide table rows on checkbox checked

Question

I have row of checkboxes received from database:

<?php foreach($user_types as $user_type): ?>    

<label class="custom-control custom-checkbox input-process">

  <input type="checkbox" class="custom-control-input user-filter" data-id3="<?=$user_type['user_type']?>" name='user_type[]' value="<?=$user_type['user_type']?>">

  <span class="custom-control-indicator"></span>

  <span class="custom-control-description"><?= $user_type['user_type'] ?></span>

</label> 

<?php endforeach; ?>

usually it's something like :

And I have a table with users:

<table class="table table-bordered table-striped accordion-users">

  <thead class="thead-inverse">

    <tr>

      <th>users</th>

    </tr>                   

  </thead>

  <tfoot>

    <tr>

      <th>users</th>

    </tr>

  </tfoot>

  <tbody>

    <?php if(!empty($users)): ?>

    <?php foreach($users as $usr): ?>

      <tr class="filter-row" data-id3="<?=$usr['user_type'];?>" id="row<?=$usr['user_type'];?>"><td><?= strtolower($usr['username']); ?></td></tr>

    <?php endforeach; ?>

    <?php endif; ?>

  </tbody>

</table>

What I want to do is to apply filter. When I click on checkbox table should leave only required user_types.

What I tried in my script:

$(function() {

//    console.clear();

$('.user-filter').click(function() {

    var user_type = $(this).data("id3");

    $(".accordion-users tr").each(function() {

       var trow_id = $(this).data("id3"); // Here you go

       if(trow_id === user_type){

           //$("#row"+user_type).toggle('slow');

           //$('.filter-row').toggle('slow');

           console.log(trow_id);



       }

       //console.log(trow_id);

    });    



    $('.test').html(user_type);

});        

});

I tried to receive id of each row in the table and compare it. Now I am stuck not sure what should I do next. Are there any solutions on this? Thank you

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

I edited the selector for the each loop to select only the table rows with the clicked checkbox filter value. Then i'm checking wether the checkbox is checked or not. If it's checked I'm showing the tr, if it's not I'm hiding the tr.

$(function() {
  $('.user-filter').click(function() {
    var user_type = $(this).data("id3");
    var checked = $(this).is(':checked');
    $(".accordion-users tr[data-id3=" + user_type + "]").each(function() {
      if (checked)
        $(this).show(); //Show if checkbox is checked
      else
        $(this).hide(); //Hide if checkbox is not checked
    });

    $('.test').html(user_type);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="custom-control custom-checkbox input-process">
  <input type="checkbox" class="custom-control-input user-filter" data-id3="FT" name='user_type[]' value="FT" checked> FT
    <input type="checkbox" class="custom-control-input user-filter" data-id3="CT" name='user_type[]' value="CT" checked> CT
</label>

<table class="table table-bordered table-striped accordion-users">
  <thead class="thead-inverse">
    <tr>
      <th>users</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>users</th>
    </tr>
  </tfoot>
  <tbody>
    <tr class="filter-row" data-id3="CT" id="rowCT">
      <td>Usr 1 (CT)</td>
    </tr>
    <tr class="filter-row" data-id3="FT" id="rowFT">
      <td>Usr 2 (FT)</td>
    </tr>
    <tr class="filter-row" data-id3="FT" id="rowFT">
      <td>Usr 3 (FT)</td>
    </tr>

  </tbody>
</table>

Hide table rows on checkbox checked

Sign up