Javascript Girl
  1. Javascript Girl
  3. JavaScript: comment détecter si une case à cocher HTML a été sélectionnée?
Intereting Posts
Google Maps v3 – Puis-je assurer un panoramique doux à chaque fois? Comment déclencher la sauvegarde automatique du mot de passe dans les navigateurs? JQuery: appelez le formulaire de l'action après avoir appelé preventDefault () Appel d'une variable javascript dans le code ac # Cliquez sur Fonction en utilisant AJAX Jquery Javascript Remplacer uniquement le texte à l'intérieur d'un div en utilisant jquery Dans quel contexte est invoquée la fonction de rappel de jQuery.post? Ignorer la validation des formulaires imbriqués avec AngularJS Comment faire pour que ServiceWorker survive à la restauration du cache / Shift + F5? JavaScript / jQuery event listener sur la charge d'image pour tous les navigateurs Comment puis-je accéder aux champs d'en-tête de demande HTTP via JavaScript? Comment faire itérer à travers tous les attributs dans un élément HTML? `This` dans la portée globale dans ECMAScript 6 Basculer cacher / afficher Google Map Markers Comment puis-je supprimer la ponctuation d'une chaîne en JavaScript en utilisant regex?

JavaScript: comment détecter si une case à cocher HTML a été sélectionnée?

Comment puis-je:

  1. Détecter si une case à cocher HTML a été cliquée / sélectionnée?
  2. Récupérer quelle case (s) a été sélectionnée (s)?

Exemple de code: 

<FORM ACTION="..."> <INPUT TYPE=CHECKBOX VALUE="1">1 bedroom<BR> <INPUT TYPE=CHECKBOX VALUE="2">2 bedrooms<BR> <INPUT TYPE=CHECKBOX VALUE="3">3 bedrooms<BR> <INPUT TYPE=CHECKBOX VALUE="4+">4+ bedrooms<P> </FORM>

Sens,

  1. Si l'utilisateur Web sélectionne "1 chambre", je souhaite qu'un événement lance un feu pour m'informer que l'utilisateur a choisi "1 chambre".
  2. Comme vous pouvez le voir, un utilisateur peut sélectionner plusieurs cases à cocher. Par exemple, ils pourraient vouloir voir des maisons qui ont soit "1 chambre" ou "2 chambres". Ils ont donc choisi les deux cases à cocher. Comment puis-je récupérer les valeurs de la case à cocher lorsque plusieurs cases à cocher ont été sélectionnées?

Dans le cas où cela aidera, je serais ouvert à l'aide de JQuery pour simplifier cela.

JQuery à la rescousse! (Puisque vous l'avez marqué comme tel): 

 $('input:checkbox[name=bedrooms]').click(function() { var values = $('input:checkbox[name=bedrooms]:checked').map(function() { return this.value }).get(); // do something with values array })

(Assurez-vous d'ajouter un attribut name="bedrooms" dans le html pour vos cases à cocher, vous en aurez besoin lors de la soumission du formulaire, afin de les récupérer sur le serveur).

J'ai utilisé quelques pseudo-sélecteurs:

  • "input:checkbox" trouve toutes les cases à cocher sur la page
  • "[name=bedrooms]" trouve tous les éléments avec attribut name="bedrooms"
  • ":checked" trouve tous les éléments avec l'attribut checked=true

Combinez-les comme "input:checkbox[name=bedrooms]:checked" et jQuery vous donne toutes les cases cochées.

Pour chacun, je supprime leur attribut de value dans un tableau, vous pouvez tout simplement itérer et faire ce que vous souhaitez.

modifier

Vous pouvez optimiser ce code pour enregistrer une référence à vos cases à cocher au lieu de dire à jQuery de les récupérer toutes les fois qu'il y a un clic: 

 var $checkboxes = $('input:checkbox[name=bedrooms]'); $checkboxes.click(function() { var values = $checkboxes .filter(function() { return this.checked }) .map(function() { return this.value }) .get(); // do something with values array })

Dans cet exemple, j'ai enregistré les cases à cocher dans les cases $checkboxes . Sur le clic de n'importe quelle case à cocher, au lieu de revenir au DOM pour saisir les vérifiés, nous filtrons simplement les $checkboxes à cocher, et pour chacune de celles-ci, supprimez l'attribut de la value dans un tableau. Le get() est juste une exigence obscure pour convertir le tableau "jQueryized" en une matrice JavaScript régulière.

1) Utilisez l'attribut onclick.
2) Vous pouvez leur donner chacun le même nom et utiliser $('input[name=yourname]:checked') pour les obtenir tous.

[Modifier] comme demandé, voici une SSCCE . 

 <!doctype html> <html> <head> <script src="jquery.js"></script> <script> $(document).ready(init); function init() { // Add onclick function to every checkbox with name "bedrooms". $('input[name=bedrooms]').click(showCheckedValues); } function showCheckedValues() { // Gather all values of checked checkboxes with name "bedrooms". var checked = $('input[name=bedrooms]:checked').map(function() { return this.value; }).get(); alert(checked); } </script> </head> <body> <form> <input type="checkbox" name="bedrooms" value="1">1 bedroom<br> <input type="checkbox" name="bedrooms" value="2">2 bedroom<br> <input type="checkbox" name="bedrooms" value="3">3 bedroom<br> <input type="checkbox" name="bedrooms" value="4+">4+ bedroom<br> </form> </body> </html> 
  <form name="myForm"> <input type="checkbox" name="myCheck" value="My Check Box"> Check Me </form> <a href="#" onClick="window.alert(document.myForm.myCheck.checked ? 'Yes' : 'No');">Am I Checked?</a>

C'est à partir d'un manuel appelé JavaScript dans 10 Easy Steps or Less par Arman Danesh – donc je suppose que cela fonctionne. J'espère que cela aide

Affectez des noms et / ou des identifiants aux éléments de votre case à cocher afin de pouvoir les distinguer dans le code. Ensuite, en utilisant jQuery, ajoutez des événements avec bind si vous souhaitez gérer les modifications d'état de vérification / désactivation.

Utilisez les identifiants sur votre case à cocher. 

 <FORM ACTION="..."> <INPUT TYPE=CHECKBOX id="c1" VALUE="1">1 bedroom<BR> <INPUT TYPE=CHECKBOX id="c2" VALUE="2">2 bedrooms<BR> <INPUT TYPE=CHECKBOX id="c3" VALUE="3">3 bedrooms<BR> <INPUT TYPE=CHECKBOX id="c4" VALUE="4+">4+ bedrooms<P> </FORM> $('c1').checked // returns whether the 1 bedroom checkbox is true or false

Vous pouvez utiliser la propriété .checked dans une case à cocher pour récupérer si une case à cocher a été vérifiée. Pour déclencher un événement lorsqu'une case à cocher est cochée, vous pouvez utiliser l'événement de clic dans jquery. Quelque chose comme ci-dessous fonctionnerait pour répertorier toutes les cases à cocher sur la page qui ont été vérifiées. 

 $("input[type='checkbox']").click(function() { // if you want information about the specific checkbox that was clicked alert("checkbox name : " + $(this).name + " | checked : " + $(this).checked); // if you want to do something with ALL the checkboxes on click. $.each($["input[type='checkbox']", function(i, checkEl) { // put any of your code to do something with the checkboxes here. alert("checkbox name : " + checkEl.name + " | checked : " + checkEl.checked); }); });

Vous pouvez utiliser les événements pour voir si une case à cocher a été sélectionnée (onChange). Vous pouvez en savoir plus sur le didacticiel Javascript essentiel (voir la section intitulée: Javascript est un langage événementiel )

Marquage: 

 ...<input type="checkbox">...
  1. Détecter si une case à cocher HTML a été cliquée / sélectionnée?

A: en utilisant jQuery 1.7+: 

 $(function(){ $("input").click(function () { console.log($(this)[0].checked); }); });
  1. Récupérer quelle case (s) a été sélectionnée (s)?

A: en utilisant à nouveau jQuery 1.7+: 

 console.log($('input:checked'));

J'espère que cela t'aides.

Si vous ne souhaitez pas utiliser JQuery, vous pouvez toujours utiliser 

 document.GetElementById("cbxCheckbox1");