Différentes façons d'obtenir la valeur à partir du bouton radio dans JavaScript
Différentes façons d'obtenir la valeur à partir du bouton radio dans JavaScript
Pour obtenir de la valeur à partir du bouton radio en JavaScript, les méthodes suivantes peuvent être utilisées:
- "getElementByid ()" et "getElementsByName ()«Méthodes
- "trouver()" méthode
- "vérifié" propriété
Nous allons maintenant passer par chacune des méthodologies énumérées une par une!
Méthode 1: Obtenez de la valeur à partir du bouton radio en javascrip
Le "getElementByid ()”La méthode récupère un élément avec un ID spécifié et le"getElementsByName ()»La méthode accède aux éléments avec le nom spécifié dans son argument. Ces méthodes peuvent être utilisées pour obtenir à la fois l'ID de bouton des attributs et la valeur du nom pour y accéder et afficher leurs valeurs.
Syntaxe
document.GetElementByid (EleMedId)Ici, "élémentID"Fait référence à l'ID spécifié de l'élément ajouté.
document.getElementsByName (nom)Dans la syntaxe ci-dessus, "nom"Est la valeur du nom de l'élément.
L'exemple suivant expliquera clairement le concept déclaré.
Exemple
Dans l'exemple suivant, nous inclurons une rubrique dans le «”Tag avec une pause de ligne comme suit:
Maintenant, attribuez le type d'entrée comme «radio«Le bouton radio et spécifiez son ID, son nom et sa valeur:
Incluez également un «étiqueter"Pour le type d'entrée avec une valeur nommée"E-mail»:
De même, répétez les étapes discutées pour le «Pas de téléphone." champ:
Après cela, incluez un bouton nommé "Soumettre«Pour obtenir la valeur en cliquant:
Maintenant, récupérez le bouton créé à l'aide du "document.getElementByid ()”Méthode dans le fichier javascript. Aussi, appliquez un «sur clic»Événement pour accéder à une fonction. Dans la fonction définie ci-dessous, accédez aux deux types d'entrée à l'aide du «document.getElementsByName ()«Méthode comme le«nom»L'attribut dans les deux types d'entrée est le même.
Enfin, appliquez un «pour”Boucle et obtenez la valeur du bouton radio sélectionné à l'aide du"vérifié»Propriété et affichez-la dans la boîte d'alerte:
document.getElementByid («soumettre»).onClick = function ()VAR VALLE = DOCUMENT.getElementsByName («contact»);
pour (var radio de valeur)
if (radio.vérifié)
alerte (radio.valeur);
La sortie du programme ci-dessus en résultera comme suit:
Méthode 2: Obtenez la valeur du bouton radio dans JavaScript à l'aide de la méthode find ()
Le "trouver()»La méthode accède à la valeur du premier élément. Cette méthode peut être implémentée pour obtenir la valeur du bouton radio coché en trouvant les attributs spécifiques à l'aide du nom ajouté.
Syntaxe
Déployer.de (valeur).trouver (radio => radio.vérifié)Ici, "depuis()»La méthode accédera à l'élément spécifié,«trouver()»La méthode correspondra à la valeur du bouton radio coché, et la valeur résultante sera renvoyée.
Regardez l'exemple suivant.
Exemple
Pour HTML, nous utiliserons le même code donné dans la méthode précédente. Dans notre fichier JavaScript, nous allons récupérer l'ID de bouton à l'aide du "document.getElementByid ()«Méthode avec un«sur clic”Événement accédant à la fonction, qui obtiendra d'abord les deux types d'entrée ayant le même attribut«contact" en utilisant le "document.getElementsByName ()" méthode.
Enfin, appliquez le «depuis()«Méthode pour accéder à la valeur stockée dans la variable nommée«valeur", et le "trouver()»La méthode obtiendra l'état vérifié de l'entrée. Finalement, le "valeur»La propriété renvoie la valeur du bouton radio spécifique marqué comme vérifié:
document.getElementByid («soumettre»).onClick = function ()VAR VALLE = DOCUMENT.getElementsByName ("Contact");
var selectValue = array.de (valeur).trouver (radio => radio.vérifié);
alerte (selectValue.valeur);
Sortir
Méthode 3: Obtenez de la valeur à partir du bouton radio dans JavaScript à l'aide de la propriété Checked ()
Le "vérifié»La propriété renvoie l'état vérifié du type d'entrée spécifié. Cette méthode peut être appliquée pour vérifier la condition vérifiée pour chacun des boutons radio et renvoyer la valeur correspondante.
Syntaxe
CheckBoxObject.vérifiéDans la syntaxe donnée, "CheckBoxObject»Fait référence à l'objet spécifié à vérifier.
Exemple
Tout d'abord, ajoutez un "étiqueter" en utilisant "”Tag pour spécifier une catégorie particulière suivie d'une pause en ligne dans"
" étiqueter:
Ensuite, répétez les procédures discutées ci-dessus pour spécifier deux types d'entrée comme «radio”Et attribuez les valeurs données suivies d'une rupture de ligne ci-dessous:
HommeFemme
Incluez également un type d'entrée nommé «soumettre"Pour obtenir la valeur du bouton radio en cliquant. Un "sur clic»L'événement sera également ajouté pour accéder à la fonction spécifiée en cliquant sur Soumettre:
Après cela, déclarez une fonction nommée «soumidata ()»Et obtenez les éléments des ID spécifiés et les stockez dans les variables nommées«obtenir" et "get1". Enfin, appliquez une condition que si le bouton radio faisant référence au «Homme" ou "Femme«Le genre est accessible, le«vérifié«La propriété le vérifiera et le«valeur”La propriété rapportera la valeur correspondante par rapport à chacun des bouton radio cochés:
functionSubmitData ()get = document.GetElementByid ("Gender")
get1 = document.GetElementByid ("Genderfem")
Si (obtenir.vérifié == true)
alerte (document.GetElementByid ("Gender").valeur);
Elseif (get1.vérifié == true)
alerte (document.GetElementByid ("Genderfem").valeur);
Sortir
Nous avons compilé différentes façons d'obtenir de la valeur à partir d'un bouton radio en javascript.
Conclusion
Pour obtenir de la valeur à partir du bouton radio en JavaScript, appliquez le «getElementByid ()" et "getElementsByName ()«Méthodes pour accéder aux deux attributs en même temps et afficher leurs valeurs correspondantes, ou«trouver()«Méthode pour faire cocher les boutons radio en trouvant les attributs spécifiés en fonction de leurs noms de définition ou du« «vérifié»Méthode de propriété pour appliquer une condition pour chacun des attributs et obtenir sa valeur. Ce blog est guidé lié à la procédure d'obtention de la valeur à partir du bouton radio en JavaScript.