Question #667

How to make checkbox filters in JavaScript?

Answer

There are several ways to make checkbox filters in JavaScript. Therefore, the general idea is always the same:

  • create the HTML list of items with a differentiating attribute (typically a class) ;
  • create HTML checkboxes and fire an event on change ;
  • when the event is fired, hide or show the item according to the checkbox status.


Here is an example (check the full code on jsfiddle):


Create items to filter:

<ul>
  <li class=".io"><a href="https://alphons.io">alphons.io</a></li>
  <li class=".com"><a href="https://google.com">google.com</a></li>
</ul>

Create checkboxes:

<div><input type="checkbox" id=".com" checked>  <label for=".com">.com</label></div>
<div><input type="checkbox" id=".io"  checked>  <label for=".io">.io</label></div>

Event listeners:

// Event for the checkboxes
document.getElementById('.com').onchange = function() { hideShow ('.com', this.checked); }
document.getElementById('.io').onchange = function() { hideShow ('.io', this.checked); }
document.getElementById('.org').onchange = function() { hideShow ('.org', this.checked); }

In the above code, we use a hideShow() function :

// Show or hide the element with class
// Show if visible = true, otherwise hide the element
function hideShow(myClass, visible) {	
  [].forEach.call(document.getElementsByClassName(myClass), function (el) { el.hidden = !visible;	});  
}

5 events in history
Answer by Alphonsio 02/24/2021 at 04:58:48 PM

There are several ways to make checkbox filters in JavaScript. Therefore, the general idea is always the same:

  • create the HTML list of items with a differentiating attribute (typically a class) ;
  • create HTML checkboxes and fire an event on change ;
  • when the event is fired, hide or show the item according to the checkbox status.


Here is an example (check the full code on jsfiddle):


Create items to filter:

<ul>
  <li class=".io"><a href="https://alphons.io">alphons.io</a></li>
  <li class=".com"><a href="https://google.com">google.com</a></li>
</ul>

Create checkboxes:

<div><input type="checkbox" id=".com" checked>  <label for=".com">.com</label></div>
<div><input type="checkbox" id=".io"  checked>  <label for=".io">.io</label></div>

Event listeners:

// Event for the checkboxes
document.getElementById('.com').onchange = function() { hideShow ('.com', this.checked); }
document.getElementById('.io').onchange = function() { hideShow ('.io', this.checked); }
document.getElementById('.org').onchange = function() { hideShow ('.org', this.checked); }

In the above code, we use a hideShow() function :

// Show or hide the element with class
// Show if visible = true, otherwise hide the element
function hideShow(myClass, visible) {	
  [].forEach.call(document.getElementsByClassName(myClass), function (el) { el.hidden = !visible;	});  
}

Answer by Alphonsio 02/24/2021 at 04:58:21 PM

There are several ways to make checkbox filters in JavaScript. Therefore, the general idea is always the same:

  • create the HTML list of items with a differentiating attribute (typically a class) ;
  • create HTML checkboxes and fire an event on change ;
  • when the event is fired, hide or show the item according to the checkbox status.


Here is an example (check the full code on jsfiddle):


Create items to filter:

<ul>
  <li class=".io"><a href="https://alphons.io">alphons.io</a></li>
  <li class=".com"><a href="https://google.com">google.com</a></li>
</ul>

Create checkboxes:

<div><input type="checkbox" id=".com" checked>  <label for=".com">.com</label></div>
<div><input type="checkbox" id=".io"  checked>  <label for=".io">.io</label></div>

Event listeners:

// Event for the checkboxes
document.getElementById('.com').onchange = function() { hideShow ('.com', this.checked); }
document.getElementById('.io').onchange = function() { hideShow ('.io', this.checked); }
document.getElementById('.org').onchange = function() { hideShow ('.org', this.checked); }

In the above code, we use a hideShow() function :

// Show or hide the element with class
// Show if visible = true, otherwise hide the element
function hideShow(myClass, visible) {	
  [].forEach.call(document.getElementsByClassName(myClass), function (el) { el.hidden = !visible;	});  
}

Answer by Alphonsio 02/24/2021 at 04:56:01 PM

There are several ways to make checkbox filters in JavaScript. Therefore, the general idea is always the same:

  • Create the HTML list of items with a differentiating attribute (typically a class).
  • Create HTML checkboxes and fire an event on change.
  • When the event is fired, hide or show the item according to the checkbox status


Here is an example (check the full code on jsfiddle):



Create items to filter:

<ul>
  <li class=".io"><a href="https://alphons.io">alphons.io</a></li>
  <li class=".com"><a href="https://google.com">google.com</a></li>
</ul>

Create checkboxes:

<div><input type="checkbox" id=".com" checked>  <label for=".com">.com</label></div>
<div><input type="checkbox" id=".io"  checked>  <label for=".io">.io</label></div>

Event listeners:

// Event for the checkboxes
document.getElementById('.com').onchange = function() { hideShow ('.com', this.checked); }
document.getElementById('.io').onchange = function() { hideShow ('.io', this.checked); }
document.getElementById('.org').onchange = function() { hideShow ('.org', this.checked); }

In the above code, we use a hideShow() function :

// Show or hide the element with class
function hideShow(myClass, visible) {	
  [].forEach.call(document.getElementsByClassName(myClass), function (el) {
  	el.hidden = !visible;
	});  
}

Question by Alphonsio 02/24/2021 at 04:42:38 PM
How to filter element according to checkboxes status?
Question by Alphonsio 02/24/2021 at 04:40:36 PM
How to make checkbox filters in JavaScript?
# ID Query URL Count

Icons proudly provided by Friconix.