Comment récupérer la valeur d’un CheckBox avec jQuery

juillet 1, 2019février 10, 2020 Amine KOUIS Aucun commentaire

Vous pouvez utiliser le sélecteur :checked de jQuery en combinaison avec la méthode each() pour récupérer les valeurs de toutes les checkboxes sélectionnées. La méthode each() utilisée ici itère simplement toutes les checkboxes. Voici un exemple:

Code HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Récupérer la valeur d'un CheckBox</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
		   // Mettez le code javascript ici.
    </script>
  </head> 
  <body>
    <h5>Quel est votre langage de programmation préféré?</h5>
    <p> 
      <label><input type="checkbox" name="langage" value="javascript">JavaScript</label><br> 
      <label><input type="checkbox" name="langage" value="python">Python</label><br>
      <label><input type="checkbox" name="langage" value="php">PHP</label><br>
      <label><input type="checkbox" name="langage" value="java">Java</label><br>
      <label><input type="checkbox" name="langage" value="scala">Scala</label>
    </p>
    <input type="button" value="Récupérer la valeur">
  </body>
</html>

Code jQuery:

$(document).ready(function() {
    $("input[type='button']").click(function() {
        var langPref = [];
        $.each($("input[name='langage']:checked"), function() {
            langPref.push($(this).val());
        });
        alert("Votre langage de programmation préféré est: " + langPref.join(", "));
    });
});