Comment filtrer les checkbox en JavaScript ?

Il existe plusieurs façon de filtrer des cases à cocher en JavaScript, mais l'idée générale est toujours la même :

• créer une liste d'éléments en HTML avec un attribut qui permet de les différencier. (typiquement une classe) ;
• créer une case à cocher qui va permettre de déclencher un événement lorsque son état change ;
• quand l'événement se déclenche, on affiche l'élément approprié au status de la case à cocher

Voici un exemple (tester le code complet sur jsfiddle):

Créer les élements à filtrer :

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

Créer les cases à cocher:

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

L'écouteur d'événement:

// 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); }

Le code ci dessus fait appel à une fonction hideShow() dont le code peut être :

// 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;	});  
}