Toggle the visibility of table rows based on a specific class using a checkbox

Question

Toggle the visibility of table rows based on a specific class using a checkbox

I am currently working on a code that displays the results of a query in a table format. I would like to have the ability to click on certain elements to show or hide them. I know this can be achieved using toggle and CSS, but I keep encountering obstacles. Here is a snippet of my code:

The code generates rows for the table based on the query results which are echoed 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...etc

...

<p>The code I have for implementing checkboxes is as follows:</p>

<pre><code><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>

In order to toggle the display when clicked, here is the CSS that needs to be toggled:

.viewed {
    display: none;
}

.outofrange {
    display: none;
}

.unviewed {
    display: none;
}

How can I implement a toggle functionality to change between show/hide when clicked?

Thank you

javascript jquery html css

Answer 1

Answer №1

To simplify your click event, you can add the following logic:

$(document).ready(function() {
  $('form input').click(function() {
    if($(this).is(':checked')) {
      $('tr.'+ $(this).attr('id')).show();
    }
    else {
      $('tr.'+ $(this).attr('id')).hide();
    }
  });
});

.snippet-code-css lang-css {
.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>

Answer 2

To simplify your click event, you can add the following logic:

$(document).ready(function() {
  $('form input').click(function() {
    if($(this).is(':checked')) {
      $('tr.'+ $(this).attr('id')).show();
    }
    else {
      $('tr.'+ $(this).attr('id')).hide();
    }
  });
});

.snippet-code-css lang-css {
.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>

Answer 3

Answer №2

To achieve this functionality, you can include the following JavaScript in your webpage. The concept involves attaching click event handlers to each checkbox (input) that triggers specific show/hide actions for three different types of cells: viewed, outofrange, and unviewed:

$(document).ready(function() {

  // Toggle visibility for 'viewed' cell type
  $('form input').eq(0).click(function() {
  
    if($(this).is(':checked')) {
      $('tr.viewed').show();
    }
    else {
      $('tr.viewed').hide();
    }
  })

  // Toggle visibility for 'unviewed' cell type
  $('form input').eq(1).click(function() {
    if($(this).is(':checked')) {
      $('tr.unviewed').show();
    }
    else {
      $('tr.unviewed').hide();
    }
  })

  // Toggle visibility for 'outofrange' cell type
  $('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>

For a demonstration, check out this live example on jsfiddle

Answer 4

To achieve this functionality, you can include the following JavaScript in your webpage. The concept involves attaching click event handlers to each checkbox (input) that triggers specific show/hide actions for three different types of cells: viewed, outofrange, and unviewed:

$(document).ready(function() {

  // Toggle visibility for 'viewed' cell type
  $('form input').eq(0).click(function() {
  
    if($(this).is(':checked')) {
      $('tr.viewed').show();
    }
    else {
      $('tr.viewed').hide();
    }
  })

  // Toggle visibility for 'unviewed' cell type
  $('form input').eq(1).click(function() {
    if($(this).is(':checked')) {
      $('tr.unviewed').show();
    }
    else {
      $('tr.unviewed').hide();
    }
  })

  // Toggle visibility for 'outofrange' cell type
  $('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>

For a demonstration, check out this live example on jsfiddle

Answer 5

Answer №3

If you want to target specific rows, you can assign a data attribute to each checkbox indicating the class of the row:

<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>

Then, you can utilize this information in your jQuery script like so:

$('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 6

If you want to target specific rows, you can assign a data attribute to each checkbox indicating the class of the row:

<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>

Then, you can utilize this information in your jQuery script like so:

$('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();
    }
});

Toggle the visibility of table rows based on a specific class using a checkbox

Answer №1

Answer №2

Answer №3

Similar questions

Unknown individual, yet revealed by the investigator

Attempting to use tabs within a tab does not function correctly

In Firefox, the content within the div element does not respect the maximum width set

Error: AppModule requires an array of arguments in order to function properly

Issue with overflow:scroll displaying incomplete div contents

The module 'react/jsx-runtime' could not be located within the path relative to '@mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js'

The request's body in the PUT method is void

Displaying Empty Boxes using Font Awesome

Could data be transmitted from the server to the client without appearing in network traffic?

PHP POST data not displaying in output

Tips for effectively showcasing the counter outcome amidst the increase and decrease buttons

What is a way to execute a series of requests using rxjs similar to forkJoin and combineLatest, without needing to wait for all requests to finish before viewing the results?

Version 5.0.4 of Mui, when used with makeStyles and withStyles, is experiencing issues with applying styles to Mui

Transforming an array of strings into a visual representation

Convert JSON data into the desired format

Automatically unset session variable 'unsetted' using a simple line of code

Unable to alter the default error message within the jquery-validation plugin

Iterate through jQuery loop, clear styles, and iterate again

Vue does not consistently update HTML when the reference value changes

develop a submission form using jquery