Creating a Live Filter with Multiple Options using Checkbox with jQuery

Submitted by alpha_luna on Wednesday, March 3, 2021 - 15:23.

In this tutorial, we are going to create a Live Filter with Multiple Options using Checkbox with jQuery. Many projects or systems need this kind of function for fast filtering the data from the database. Filter functions are very common to us, in other cases when you use the filter function it also loads the whole page. In our case, we are going to create a live filter with multiple options using the checkbox without load the whole web page. You can also check the live demo of this simple tutorial, so you can get an idea and you can try this out.

Let's start coding.

Getting Started

First of all, we have to download the jQuery Library. Click here to download the library. You can also use jQuery Library's CDN but you must have an internet connection when executing your project if you use CDN's.

For the design, I will use the following CSS.

  1. /* latin */
  2. @font-face {
  3.   font-family: 'Droid Sans';
  4.   font-style: normal;
  5.   font-weight: 400;
  6.   src: local('Droid Sans'), local('DroidSans'), url(http://fonts.gstatic.com/s/droidsans/v6/s-BiyweUPV0v-yRb-cjciPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
  7.   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
  8. }
  9.  
  10. body {
  11.                 background: #9e9e9e;
  12.         }
  13.         .container {
  14.                 width: 800px;
  15.                 height: auto;
  16.                 margin: 0 auto;
  17.          }
  18.         .filterblock {
  19.                 display: inline;
  20.                 margin-right: 15px;
  21.         }
  22.         #filters {             
  23.                 background: #487479;
  24.                 padding: 10px;
  25.                 border-radius: 3px 3px 0 0;
  26.                 text-align: center;
  27.         }
  28.         .resultblock {
  29.                 width: 100%;
  30.                 height: auto;
  31.                 background: #487479;
  32.                 color:white;
  33.                 margin-top: 15px;
  34.                 font-family: cursive;
  35.         }
  36.         .itemimg {
  37.                 width: 150px;
  38.                 height:150px;
  39.                 background: #ccc;
  40.         }
  41.  
  42.         .desc {
  43.                 width: 650px;
  44.                 height: auto;
  45.                 display: inline-block;
  46.                 float: right;
  47.         }
  48.  
  49.         .desc_text {
  50.                 padding: 10px;
  51.         }
  52.  
  53.         label {
  54.             display: inline-block;
  55.             cursor: pointer;
  56.             position: relative;
  57.             padding-left: 25px;
  58.             margin-right: 15px;
  59.             font-size: 20px;
  60.             margin-bottom: 10px;
  61.             color: #FFF;
  62.             font-family: 'Tahoma'
  63.         }
  64.  
  65.         label:before {
  66.             content:"";
  67.             display: inline-block;
  68.             width: 20px;
  69.             height: 20px;
  70.             margin-right: 10px;
  71.             position: absolute;
  72.             left: 0;
  73.             bottom: 1px;
  74.             background-color: cadetblue;
  75.             box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
  76.             border-radius: 3px;
  77.         }
  78.         input[type=checkbox] {
  79.             display: none;
  80.         }
  81.         input[type=checkbox]:checked + label:before {
  82.             content:"\2713";
  83.             text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  84.             font-size: 20px;
  85.             color: #FFF;
  86.             text-align: center;
  87.             line-height: 15px;
  88.         }
  89.  
  90.  
  91.         #demo-header {
  92.                 height: 150px;
  93.                 width: 100%;
  94.                 background: url('http://www.jqueryajaxphp.com/wp-content/uploads/2015/01/JAP-Logo.png') center no-repeat !important;
  95.                 margin-bottom: 25px;
  96.                 border-bottom: 1px solid #999;
  97.                 padding-bottom: 25px;
  98.         }
  99.      
  100.      footer {
  101.                 width: 786px;
  102.                 font: normal 16px Arial, Helvetica, sans-serif;
  103.                 padding: 15px 35px;
  104.                 position: fixed;
  105.                 bottom: 0;
  106.                 left: 50%;
  107.                 margin-left: -420px;
  108.                 background-color: #1f1f1f;
  109.                 background-image: -webkit-linear-gradient(top, #1f1f1f, #101010);
  110.                 background-image: -moz-linear-gradient(top, #1f1f1f, #101010);
  111.                 background-image: linear-gradient(top, #1f1f1f, #101010);
  112.                 border-radius: 2px 2px 0 0;
  113.                 box-shadow: 0 -1px 4px rgba(0,0,0,0.4);
  114.                 z-index: 1;
  115.                 text-align: center;
  116.         }
  117.  
  118.         a {
  119.                 color: #FFFFFF;
  120.         }

Our Goal in this tutorial is to create a page that has multiple data in listed and different checkboxes options for filtering the data. In my case, I will use some sample images in my list. You can remove the "img" tags or change the source attribute of the images when copying/pasting the codes that will be provided below.

Creating Markup

Create an "index.html" file and copy/paste the codes below. Please don't forget to load the jQuery library and the CSS file in your markup

Example

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <title>Live Filter with Multiple Options using jQuery</title>
  7.  
  8.         <link rel="stylesheet" href="assets/style.css">
  9.         <script src="assets/jquery-1.10.2.js"></script>
  10. </head>
  12.         <!-- Place the markup scripts here -->
  13. </body>
  14. </html>

This is a simple HTML source code that contains three checkboxes used to filter the data.

  1. <div id="filters">
  2.         <div class="filterblock">
  3.                   <input id="check1" type="checkbox" name="check" value="php" class="category">
  4.         <label for="check1">PHP</label>
  5.         </div>
  6.  
  7.         <div class="filterblock">
  8.                   <input id="check2" type="checkbox" name="check" value="visual_basic" class="category">
  9.         <label for="check2">Visual Basic</label>
  10.         </div>
  11.  
  12.         <div class="filterblock">
  13.                   <input id="check3" type="checkbox" name="check" value="android" class="category">
  14.         <label for="check3">Android</label>
  15.         </div>
  16. </div>

Next is we will create some sample data to be displayed. We will use "resultblock" as the class name for all sets of data and each set will have a custom data attribute which is the "data-tag" for the identification of each set when filtering the list.

  1. <div class="searchresults">
  2.  
  3.         <div class="resultblock" data-tag="php">
  4.                 <img src="img/php.jpg" class="itemimg">                                
  5.                 <div class="desc">
  6.                         <div class="desc_text">
  7.                         Nulla et dapibus odio. Ut vestibulum turpis neque, at accumsan lacus luctus elementum.
  8.                         Nulla et volutpat ante, efficitur tempor arcu. Ut eget scelerisque massa. Nam sed mattis
  9.                         sapien, ac congue ex. Cras cursus nisi vitae magna molestie, a scelerisque tellus dapibus.
  10.                         Integer vitae condimentum ex. Integer congue orci aliquet purus aliquet gravida. Nulla gravida
  11.                         vulputate interdum. Aenean elementum dolor in dui tincidunt pharetra.
  12.                 </div>
  13.                 </div>
  14.         </div>
  15.  
  16.         <div class="resultblock" data-tag="android">
  17.                 <img src="img/android.png" class="itemimg">                            
  18.                 <div class="desc">
  19.                         <div class="desc_text">
  20.                         Nulla et dapibus odio. Ut vestibulum turpis neque, at accumsan lacus luctus elementum.
  21.                         Nulla et volutpat ante, efficitur tempor arcu. Ut eget scelerisque massa. Nam sed mattis
  22.                         sapien, ac congue ex. Cras cursus nisi vitae magna molestie, a scelerisque tellus dapibus.
  23.                         Integer vitae condimentum ex. Integer congue orci aliquet purus aliquet gravida. Nulla gravida
  24.                         vulputate interdum. Aenean elementum dolor in dui tincidunt pharetra.
  25.                 </div>
  26.                 </div>
  27.         </div>
  28.  
  29.         <div class="resultblock" data-tag="visual_basic">
  30.                 <img src="img/vb.png" class="itemimg">                         
  31.                 <div class="desc">
  32.                         <div class="desc_text">
  33.                         Nulla et dapibus odio. Ut vestibulum turpis neque, at accumsan lacus luctus elementum.
  34.                         Nulla et volutpat ante, efficitur tempor arcu. Ut eget scelerisque massa. Nam sed mattis
  35.                         sapien, ac congue ex. Cras cursus nisi vitae magna molestie, a scelerisque tellus dapibus.
  36.                         Integer vitae condimentum ex. Integer congue orci aliquet purus aliquet gravida. Nulla gravida
  37.                         vulputate interdum. Aenean elementum dolor in dui tincidunt pharetra.
  38.                 </div>
  39.                 </div>
  40.         </div>
  41.  
  42.         <div class="resultblock" data-tag="php">
  43.                 <img src="img/php1.png" class="itemimg">                               
  44.                 <div class="desc">
  45.                         <div class="desc_text">
  46.                         Nulla et dapibus odio. Ut vestibulum turpis neque, at accumsan lacus luctus elementum.
  47.                         Nulla et volutpat ante, efficitur tempor arcu. Ut eget scelerisque massa. Nam sed mattis
  48.                         sapien, ac congue ex. Cras cursus nisi vitae magna molestie, a scelerisque tellus dapibus.
  49.                         Integer vitae condimentum ex. Integer congue orci aliquet purus aliquet gravida. Nulla gravida
  50.                         vulputate interdum. Aenean elementum dolor in dui tincidunt pharetra.
  51.                 </div>
  52.                 </div>
  53.         </div>
  54.  
  55.         <div class="resultblock" data-tag="visual_basic">
  56.                 <img src="img/vb2.jpg" class="itemimg">                                
  57.                 <div class="desc">
  58.                         <div class="desc_text">
  59.                         Nulla et dapibus odio. Ut vestibulum turpis neque, at accumsan lacus luctus elementum.
  60.                         Nulla et volutpat ante, efficitur tempor arcu. Ut eget scelerisque massa. Nam sed mattis
  61.                         sapien, ac congue ex. Cras cursus nisi vitae magna molestie, a scelerisque tellus dapibus.
  62.                         Integer vitae condimentum ex. Integer congue orci aliquet purus aliquet gravida. Nulla gravida
  63.                         vulputate interdum. Aenean elementum dolor in dui tincidunt pharetra.
  64.                 </div>
  65.                 </div>
  66.         </div>
  67.  
  68.         <div class="resultblock" data-tag="android">
  69.                 <img src="img/android2.jpg" class="itemimg">                           
  70.                 <div class="desc">
  71.                         <div class="desc_text">
  72.                         Nulla et dapibus odio. Ut vestibulum turpis neque, at accumsan lacus luctus elementum.
  73.                         Nulla et volutpat ante, efficitur tempor arcu. Ut eget scelerisque massa. Nam sed mattis
  74.                         sapien, ac congue ex. Cras cursus nisi vitae magna molestie, a scelerisque tellus dapibus.
  75.                         Integer vitae condimentum ex. Integer congue orci aliquet purus aliquet gravida. Nulla gravida
  76.                         vulputate interdum. Aenean elementum dolor in dui tincidunt pharetra.
  77.                 </div>
  78.                 </div>
  79.         </div>
  80.  
  81.         <div class="resultblock" data-tag="visual_basic">
  82.                 <img src="img/vb1.png" class="itemimg">                                
  83.                 <div class="desc">
  84.                         <div class="desc_text">
  85.                         Nulla et dapibus odio. Ut vestibulum turpis neque, at accumsan lacus luctus elementum.
  86.                         Nulla et volutpat ante, efficitur tempor arcu. Ut eget scelerisque massa. Nam sed mattis
  87.                         sapien, ac congue ex. Cras cursus nisi vitae magna molestie, a scelerisque tellus dapibus.
  88.                         Integer vitae condimentum ex. Integer congue orci aliquet purus aliquet gravida. Nulla gravida
  89.                         vulputate interdum. Aenean elementum dolor in dui tincidunt pharetra.
  90.                 </div>
  91.                 </div>
  92.         </div>
  93.  
  94.         <div class="resultblock" data-tag="php">
  95.                 <img src="img/php2.png" class="itemimg">                               
  96.                 <div class="desc">
  97.                         <div class="desc_text">
  98.                         Nulla et dapibus odio. Ut vestibulum turpis neque, at accumsan lacus luctus elementum.
  99.                         Nulla et volutpat ante, efficitur tempor arcu. Ut eget scelerisque massa. Nam sed mattis
  100.                         sapien, ac congue ex. Cras cursus nisi vitae magna molestie, a scelerisque tellus dapibus.
  101.                         Integer vitae condimentum ex. Integer congue orci aliquet purus aliquet gravida. Nulla gravida
  102.                         vulputate interdum. Aenean elementum dolor in dui tincidunt pharetra.
  103.                 </div>
  104.                 </div>
  105.         </div>
  106.  
  107.         <div class="resultblock" data-tag="android">
  108.                 <img src="img/android1.jpg" class="itemimg">                           
  109.                 <div class="desc">
  110.                         <div class="desc_text">
  111.                         Nulla et dapibus odio. Ut vestibulum turpis neque, at accumsan lacus luctus elementum.
  112.                         Nulla et volutpat ante, efficitur tempor arcu. Ut eget scelerisque massa. Nam sed mattis
  113.                         sapien, ac congue ex. Cras cursus nisi vitae magna molestie, a scelerisque tellus dapibus.
  114.                         Integer vitae condimentum ex. Integer congue orci aliquet purus aliquet gravida. Nulla gravida
  115.                         vulputate interdum. Aenean elementum dolor in dui tincidunt pharetra.
  116.                 </div>
  117.                 </div>
  118.         </div>         
  119.  
  120. </div>

jQuery Script for Filtering

 

The below code is the script that will filter our list when the checkboxes' properties will change.

  1. $(document).ready(function(){
  2.         $('.category').on('change', function(){
  3.                 var category_list = [];
  4.                 $('#filters :input:checked').each(function(){
  5.                 var category = $(this).val();
  6.                 category_list.push(category);
  7.                 });
  8.        
  9.                 if(category_list.length == 0)
  10.                 $('.resultblock').fadeIn();
  11.                 else {
  12.                 $('.resultblock').each(function(){
  13.                         var item = $(this).attr('data-tag');
  14.                         if(jQuery.inArray(item,category_list) > -1)
  15.                         $(this).fadeIn('slow');
  16.                         else
  17.                         $(this).hide();
  18.                 });
  19.                 }  
  20.         });
  21. });

Output

For the PHP value
Result

For the Visual Basic value
Result

For the Android value
Result

DEMO

Learn by Examples

Examples are better than thousands of words. Examples are often easier to understand than text explanations. For the full source code, kindly click the "Download Code" button below.

I hope that this simple yet useful tutorial that I created may help you with your future projects.

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected].

Practice Coding.
Thank you very much.
Tags
Live Filter with Multiple Options using Checkbox with jQuery
Live Filter with Multiple Options
Live Filter
Multiple Options
Javascript
jQuery
Live Filter Checkbox
Multiple Options Checkbox

Comments

Add new comment

About text formats