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

DenseCrab · Accepted Answer · 2017-09-19 08:15:21Z

3

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>

edited Sep 19, 2017 at 8:15

answered Sep 19, 2017 at 8:07

DenseCrab

1,31311 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yevgeniy Bagackiy Over a year ago

If I click CT i want to CT stay not hide. If CT is clicked then I need to toggle FT

Collectives™ on Stack Overflow

Hide table rows on checkbox checked

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related