Obtenir la radio sélectionnée sans utiliser "Id" mais "nom"

J'essayais d'obtenir le bouton radio sélectionné en utilisant "document.getElementByName ('nameOfradio')" car tous les boutons radio partagent le même nom. Mais rien ne s'est passé. J'ai essayé la même chose avec document.getElementById ('nameOfradio') et a bien fonctionné. Cependant, j'ai dû donner un identifiant unique pour tous les boutons radio. Donc, cela devient moche quand j'ai 20 boutons radio. En conséquence, ce que je voulais, c'est faire un raccourci. Comment puis-je obtenir la valeur du bouton radio sélectionné en utilisant leur "nom"? Codes;

Html

<input type="radio" name="nameOfradio" value="onm1" /> 1 <input type="radio" name="nameOfradio" value="onm2" /> 2 <input type='button' onclick='radio3()' value='Submit' /> </form>

Ajax (relavant partie de radio3 ())

 var radioPushed = document.getElementByName('nameOfradio').value; var queryString = "?radioPushed=" + radioPushed;//to send the value to another file ajaxRequest.open("GET", "radio_display.php" + queryString, true); ajaxRequest.send(null);

Comme je l'ai dit document.getElementById a fonctionné, mais il nécessite trop de travail 🙁 Comment puis-je simplifier en utilisant la fonctionnalité commune des boutons radio, au lieu de leur donner un identifiant unique? Une brève explication pourquoi je ne pourrais pas le faire serait très utile ( Nouveau en javascript et ajax)

Demo: http://jsfiddle.net/majidf/LhDXG/

Marquage

 Sex:<br/> <input type="radio" name="gender" value="male" /> Male<br/> <input type="radio" name="gender" value="female" /> Female <br/> Age group:<br/> <input type="radio" name="ageGroup" value="0-3" /> 0 to 3<br/> <input type="radio" name="ageGroup" value="3-5" /> 3 to 5<br/> <input type="radio" name="ageGroup" value="5-10" /> 5 to 10<br/> <button onclick="getValues();">Get values</button>

 function getRVBN(rName) { var radioButtons = document.getElementsByName(rName); for (var i = 0; i < radioButtons.length; i++) { if (radioButtons[i].checked) return radioButtons[i].value; } return ''; } function getValues() { var g = getRVBN('gender'); var a = getRVBN('ageGroup'); alert(g + ' ' + a); }

Cette ligne:

 document.getElementByName('nameOfradio').value

devrait être:

  document.querySelector('input[name=nameOfradio]:checked').value;

Using querySelector

Notez que les pseudo-classes CSS sont accessibles par deux points (:).

Économisez-vous de la douleur dans le js dev ultérieur et utilisez une bibliothèque js comme jQuery. Ensuite, vous pouvez faire quelque chose comme $('input[name=radioName]:checked').val()

C'est pourquoi vous devez utiliser une bibliothèque javascript.

 document.querySelector('input[name=nameOfradio]');

Par exemple, n'est pas pris en charge avant IE8.

Laissez la bibliothèque gérer la folie du navigateur.

Dans jQuery, vous pouvez simplement utiliser $('input[name=radioName]:checked').val() ou $("form").serialize() et faites-le.

Vous pouvez utiliser la propriété de class si vous recherchez une solution rapide. De nombreux éléments peuvent avoir la même class . Utilisez la commande:

 document.getElementsByClass('nameOfradio');

En outre, vous devez utiliser la forme correcte d'obtenir des éléments par nom qui est:

 document.getElementsByName('nameOfradio');

Vous pouvez également utiliser le code suivant pour trouver la valeur radio sélectionnée comme suit:

 radioObj=document.getElementsById('nameOfradio'); var radioLength = radioObj.length; if(radioLength == undefined) { if(radioObj.checked) { return radioObj.value; } else { return ""; } } for(var i = 0; i < radioLength; i++) { if(radioObj[i].checked) { return radioObj[i].value; } } return "";

 document.querySelector('input[name=nameOfRadio]:checked').value

Par exemple:-

 <form> <input type="radio" name="gender" value="male"> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other </form> document.querySelector('input[name=gender]:checked').value

En outre, vous pouvez ajouter un attribut checked à un bouton radio par défaut parmi le groupe de boutons radio si nécessaire

 <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other