Hide/show table rows with certain class with checkbox

Question

I have a bit of code that show the results of a query in a table. I would like to be able to click to either show or hide certain ones. I know I can do this with toggle and CSS but keep getting stuck. My code is like this

The query results like this to build the rows of the table which I echo out.

$fields .= "<tr class='viewed' id='".$job_id."' style=".$new_table."><td scope='row' data-label='Date' style='".$new_table."'>".$new_date."</td><td data-label='Pickup'>".$p_city."</td><td data-label='Destination'>".$d_city."</td><td data-label='Pax'>".$pax."</td><td data-label='Vehicle'>".$vehicle_required."</td><td data-label='Status'>".$bidded." (<B>".$bid_count."</B>) </td></td><td width='50px'><button type='button' data-name='".$job_id."' class='btn btn-success'><span class='glyphicon glyphicon-zoom-in'></span> View job </button></td></tr>";

$fields .= "<tr class='unviewed' id='".$job_id."' style=".$new_table."><td scope='row' data-label='Date' style='".$new_table."'>".$new_date."</td><td data-label='Pickup'>".$p_city."</td><td data-label='Destination'>".$d_city."</td><td data-label='Pax'>".$pax."</td><td data-label='Vehicle'>".$vehicle_required."</td><td data-label='Status'>".$bidded." (<B>".$bid_count."</B>) </td></td><td width='50px'><button type='button' data-name='".$job_id."' class='btn btn-success'><span class='glyphicon glyphicon-zoom-in'></span> View job </button></td></tr>";

$fields .= "<tr class='outofrange' id='".$job_id."' style=".$new_table."><td scope='row' data-label='Date' style='".$new_table."'>".$new_date."</td><td data-label='Pickup'>".$p_city."</td><td data-label='Destination'>".$d_city."</td><td data-label='Pax'>".$pax."</td><td data-label='Vehicle'>".$vehicle_required."</td><td data-label='Status'>".$bidded." (<B>".$bid_count."</B>) </td></td><td width='50px'><button type='button' data-name='".$job_id."' class='btn btn-success'><span class='glyphicon glyphicon-zoom-in'></span> View job </button></td></tr>";

The code I have for the checkboxes is :

<div class="container">
  <h2>Form control: inline checkbox</h2>
  <p>The form below contains three inline checkboxes:</p>
  <form>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Show viewed
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Show unviewed
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Show outofrange
    </label>
  </form>
</div>

and the CSS that I need to toggle to show when clicked is

.viewed {
    display: none;
}

.outofrange {
    display: none;
}

.unviewed {
    display: none;
}

How do I just toggle when clicked to change to show/hide?

Many thanks

Answer 1

You could add the class of the row you wish to target to a data attribute of each checkbox like this:

<label class="checkbox-inline">
  <input type="checkbox" data-target-class="viewed" value="">Show viewed
</label>
<label class="checkbox-inline">
  <input type="checkbox" data-target-class="unviewed" value="">Show unviewed
</label>
<label class="checkbox-inline">
  <input type="checkbox" data-target-class="outofrange" value="">Show outofrange
</label>

and then use that in your jQuery like this:

$('form input[type="checkbox"]').on('click', function() {
    var targetClass = $(this).data('target-class');
    var $rows = $('tr.' + targetClass);
    if($(this).is(':checked')) {
        $rows.show();
    } else {
        $rows.hide();
    }
});

Answer 2

Try adding the following javascript to your page to achieve this. The idea is to add click handlers to each checkbox (input) that runs specific show/hide logic for each of your three cell types viewed, outofrange and unviewed:

$(document).ready(function() {

  // Add logic to toggle visiblity when viewed check clicked
  $('form input').eq(0).click(function() {
  
    if($(this).is(':checked')) {
      $('tr.viewed').show();
    }
    else {
      $('tr.viewed').hide();
    }
  })

  // Add logic to toggle visiblity when unviewed check clicked
  $('form input').eq(1).click(function() {
    if($(this).is(':checked')) {
      $('tr.unviewed').show();
    }
    else {
      $('tr.unviewed').hide();
    }
  })

  // Add logic to toggle visiblity when outofrange check clicked
  $('form input').eq(2).click(function() {
    if($(this).is(':checked')) {
      $('tr.outofrange').show();
    }
    else {
      $('tr.outofrange').hide();
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container">
  <h2>Form control: inline checkbox</h2>
  <p>The form below contains three inline checkboxes:</p>
  <form>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Show viewed
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Show unviewed
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Show outofrange
    </label>
  </form>
</div>

Also a working jsfiddle here

Answer 3

You can add it on simplify your click event like this.

$(document).ready(function() {

  // Add logic to toggle visiblity when unviewed check clicked
  $('form input').click(function() {
    if($(this).is(':checked')) {
      $('tr.'+ $(this).attr('id')).show();
    }
    else {
      $('tr.'+ $(this).attr('id')).hide();
    }
  });
  });

.viewed {
    display: none;
}

.outofrange {
    display: none;
}

.unviewed {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <h2>Form control: inline checkbox</h2>
  <p>The form below contains three inline checkboxes:</p>
  <form>
    <label class="checkbox-inline">
      <input type="checkbox" value="" id="viewed">Show viewed
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="" id="unviewed">Show unviewed
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="" id="outofrange">Show outofrange
    </label>
  </form>
  <div>
  
  <table>
  
  <tr class="viewed">
    <td>viewed</td>
  </tr>
  <tr class="unviewed">
    <td>unviewed</td>
  </tr>
  <tr class="outofrange">
    <td>outofrange</td>
  </tr>
  </table>
  </div>
</div>