Comment puis-je obtenir le texte d'un bouton radio (pas la valeur)

Je sais que je peux obtenir l'attribut "valeur" d'un bouton-poussoir, mais je trouve étrangement difficile d'obtenir le texte du bouton-poussoir.

Considérons l'exemple ci-dessous. Il dispose de 3 boutons radio et tente d'alerter la valeur du premier bouton radio, qui est "rouge", puis d'alerter le texte du bouton-poussoir, "Apple", mais cela échoue.

L'obtention du texte de presque n'importe quel élément peut être effectuée avec elem.childNodes [0] .nodeValue. Pourquoi ne fonctionne-t-il pas pour les boutons radio?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > <head> <title>Radio Buttons</title> <style type="text/css"> </style> <script type="text/javascript"> function start(){ var rblist = document.getElementsByName("colors"); var elem = rblist[0]; alert(elem.value); // PRINTS "RED" alert(elem.childNodes[0].nodeValue); //THROWS ERROR } </script> </head> <body onload="start();"> <input type="radio" name="colors" value="red" checked>apple</input> <input type="radio" name="colors" value="blue">sky</input> <input type="radio" name="colors" value="green">grass</input> </body> </html>

Cela ne fonctionne pas parce qu'il n'y a pas de texte dans un <input> comme ça – c'est illégal dans XHTML. Ce doit être:

<input type="radio" name="colors" value="red" id="radio1" checked="checked" /><label for="radio1">apple</label>

Ensuite, vous pouvez rechercher le texte dans le <label> .

 elem.nextSibling.nodeValue.replace('\n', '')

Le remplacement est de se débarrasser de la nouvelle ligne (peut-être différent sur différents systèmes d'exploitation, je suis sous Windows), ce qui est là pour une raison quelconque.

 <form id="myForm"> <ul> <li><input type="radio" name="colors" value="red">apple</li> <li><input type="radio" name="colors" value="blue">sky</li> <li><input type="radio" name="colors" value="green">grass</li> </ul> </form> <script> (function(){ var form = document.getElementById("myForm"); var colorFields = form.elements["colors"]; alert(colorFields[0].nextSibling.data); //alerts the text apple not the value red. });

J'ai ajouté cette réponse parce que précédemment il n'y avait pas de solution complète à la question.
Le code ci-dessous utilise deux fonctions prototypes à partir de l'objet Array:

forEach ajouter un écouteur d'événement de clic pour chaque noeud radio
filter pour récupérer le noeud radio vérifié

Car RadioNodeList n'a pas de fonctionnalités intégrées.

 var rblist = document.getElementsByName("colors");; [].forEach.call(rblist, function(e) { e.addEventListener('click', showText, false) }); function showText() { var rb = [].filter.call(rblist, function(e) { return e.checked; })[0]; console.log(rb.nextElementSibling.innerText); };

 <input type="radio" name="colors" value="red" /><label>apple</label> <input type="radio" name="colors" value="blue" /><label>sky</label> <input type="radio" name="colors" value="green" /><label>grass</label>