Atelier Graphique et Web: Afficher les résultats d'une checkbox avec jQuery

Petit tuto sur l’évènement "click" de jquery sur des checkbox html.

J'utilise les méthodes suivantes :

on()
each()
push()
text()
join()
Création des checkbox en html

<!doctype html>


 <html lang="fr" class="no-js"> 
<head>
   <meta charset="utf-8" />
   <title>Afficher les résultats d'une checkbox avec jQuery</title>
   <meta name="viewport" content="width=device-width" />
   <meta name="description" content="" />
   <link rel="stylesheet" href="css/style.css" />
   <script>
       document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/,'js');
   </script>
</head>

<body role="document">
   
<div class="container">
<label for="html">html</label>
<input type="checkbox" class="check" id="html" name="check1" value="html"/>

<label for="css">css </label>
<input type="checkbox" class="check" id="css" name="check1" value="css"/>

<label for="js">js</label>
<input type="checkbox" class="check" id="js" name="check1" value="js"/>

<label for="php">php</label>
<input type="checkbox" class="check" id="php" name="check1" value="php"/>
</div>



<p></p>

   <script src="js/jquery-3.3.1.min.js"></script>
   <script src="js/script.js"></script>
</body>

</html>

Le code css

.container{
position: absolute; /* postulat de départ */
top: 50%; left: 50%; /* à 50%/50% du parent référent */
transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
background: lightblue;
padding:150px;
}

label{
font-size: 30px;
}

.check {
    width:30px;
    height:30px;
}

p{
text-align:center;
font-size: 40px;
}

Le code jquery est le suivant

$('input').on('click', function(){

    var tab = [];
$.each($('input:checked'), function(){
    tab.push($(this).val());
});

$('p').text(tab.join());

});

/*
Explication

Évènement "click" sur le input (Lorsque l'on cliquera sur une ou plusieurs checkbox, ça va reconnaître l'action du clic).

On a une fonction qui contient un tableau vide que j'ai appelé ici "tab" pour "tableau".

Je fais une recherche avec la méthode each() sur mes "input"

Je dis que lorsqu'une checkbox sera cochée, tu vas le placer à la fin de mon tableau grâce à la méthode push() qui va contenir les valeurs des inputs soit value="html" etc...

J'affiche mes résultats dans un paragraphe en utilisant la méthode text(). La méthode join(), permet de mettre des virgules entre mes choix qui se trouvent dans le tableau. Cette méthode possède place par défaut une virgule.
*/

Rechercher dans ce blog

Afficher les résultats d'une checkbox avec jQuery

Modernizr