le MEMO du WEB développeur
••• JQuery •••  Liste des Mémos, astuces et bonnes pratiques

Jquery récupérer les valeurs de checkbox, select et radio

Pense bête à garder sous le coude pour tout ce qui est manipulation en JQuery des inputs de type checkbox, radio et autre select ...

Manipuler les checkbox avec JQUERY

Comment savoir si un input checkbox d'identifiant checkBox  est coché :

// Première façon : utilisation de la propriété attr (attribut)
alert ($('#checkBox').attr('checked'));

// Deuxième façon : utilisation du sélecteur :checked
alert($('#checkBox').is(':checked'));

 L'alerte renverra true si le checkbox est coché, false sinon.

Ci dessous, je parcours tous les inputs de type checkbox qui sont cochés  et j'affiche dans la console leur identifiant  :

$("input[type='checkbox']:checked").each(
          function() {
           console.log($(this).attr('id'));
          });          
         }
    );

Manipuler les input RADIO avec JQUERY

Cocher le premier bouton radio d'un formulaire avec jquery:

$("form input:radio[0]").attr("checked","checked");

Retourne la valeur du bouton radio sélectionné dans le groupe radio de name="mongroupe".
Ne renvoie rien si aucun radio sélectionné

$('input[type=radio][name=mongroupe]:checked').attr('value'); 

Manipuler les input SELECT avec JQUERY

Sélectionner en JQuery un item particulier d'un élément de type SELECT  par son attribut "value".
Ci dessous, je sélectionne l'item de value='Marseille' dans l'input SELECT d'identifiant #element.
Utile pour pré-selectionner une valeur dans un menu déroulant.
 

Code HTML :

<SELECT id="element ">
  <OPTION VALUE="Paris">Paris</OPTION>
  <OPTION VALUE="Grenoble">Grenoble</OPTION>
  <OPTION VALUE="Marseille">Marseille</OPTION>
</SELECT>

Code JQuery :

$('#element option[value="Marseille"]').attr("selected", "selected");

source : http://jquery-howto.blogspot.com/2008/12/how-to-check-if-checkbox-is-checked.html

 

publié le 09/12/2011 par Memo Web
Formulaires
Commentaire :
Merci !! Vous m'avez ôté une grosse épine du pied ;-)
par inconnu, le 20/12/2014
$('#checkBox')[0].checked is faster
par inconnu, le 12/12/2012
Commenter le Mémo :

Ajouter / Déplacer dynamiquement un élément dans le DOM avec jQuery
Siblings() Parcours des frères immédiats d'un élément
Détecter un click à l'extérieur d'un élément avec JQuery
Faire clignoter un élément avec JQuery
Parcourir tous les éléments d'une classe en JQuery
Apparition d'un élément en fondu avec JQuery sur le survol de souris
Atteindre une ancre avec JQuery
Charger JQuery directement via les librairies google
Afficher une image différente selon la date de l'année en javascript
Sélecteurs RegExp et JQuery
Ajoutez vos propres Mémos sur MEMO-WEB

Il suffit de vous créer un compte sur le site

Vous pourrez choisir un thème parmis l'une des catégories proposées par MEMO-WEB.

Rédigez votre Mémo.
Après validation par MEMO-WEB, il sera mis en ligne.
Ajouter vos Mémos