Yevgeniy Bagackiy Yevgeniy Bagackiy - 3 years ago 168
jQuery Question

Hide table rows on checkbox checked

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 :

enter image description here

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

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download