JSFiddle - React, Tailwind, and code Playground

by Alphonsio

HTML

<!-- 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>
<div><input type="checkbox" id=".org" checked>  <label for=".org">.org</label></div>

<!-- 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>
  <li class=".com"><a href="https://facebook.com">facebook.com</a></li>
  <li class=".com"><a href="https://twitter.com">twitter.com</a></li>
  <li class=".org"><a href="https://mozilla.org">mozilla.org</a></li>
  <li class=".org"><a href="https://wikipedia.org">wikipedia.org</a></li>  
  <li class=".io"><a href="https://slither.io">slither.io</a></li>
</ul>

JavaScript

// Hide the element with classToHide
function hide(classToHide) {	
  [].forEach.call(document.getElementsByClassName(classToHide), function (el) {
  	el.hidden = true;
	});  
}

// Show the element with classToShow
function show(classToShow) {	
  [].forEach.call(document.getElementsByClassName(classToShow), function (el) {
  	el.hidden = false;
	});  
}



// ::: Events :::

// Event for the .com checkbox
document.getElementById('.com').onchange = function() {
	if (this.checked) show('.com'); else hide('.com');
}

// Event for the .io checkbox
document.getElementById('.io').onchange = function() {
	if (this.checked) show('.io'); else hide('.io');
}

// Event for the .org checkbox
document.getElementById('.org').onchange = function() {
	if (this.checked) show('.org'); else hide('.org');
}