En JavaScript, comment puis-je obtenir tous les boutons radio dans la page avec un nom donné?

Comme le dit le titre, quelle est la meilleure façon de JavaScript pour obtenir tous les boutons radio sur une page avec un nom donné. En fin de compte je vais l'utiliser pour déterminer le bouton radio est sélectionné, donc, une autre façon de formuler la question:

Donné une variable chaîne de caractères en JavaScript, comment puis-je savoir ce qui exact radio bouton de l'élément d'entrée (le cas échéant) de cette chaîne, comme son nom l'est actuellement sélectionné?

Je suis pas à l'aide de jQuery. Si vous souhaitez fournir un jQuery réponse, aller de l'avant. Quelqu'un d'autre pourrait trouver utile. Mais il ne m'aide pas et je ne vais pas upvote.

source d'informationauteur Joel Coehoorn

  1. 22

    Vous pouvez utiliser document.getElementsByName()en passant le nom de la radio du groupe, puis la boucle au-dessus d'eux l'inspection de l' checked attribut, par exemple quelque chose comme:

    function getCheckedValue( groupName ) {
    var radios = document.getElementsByName( groupName );
    for( i = 0; i < radios.length; i++ ) {
        if( radios[i].checked ) {
            return radios[i].value;
        }
    }
    return null;
}
  2. 8

    Utilisation document.getElementsByName() est la réponse courte à la question que vous avez posée.

    Cependant, il peut être mieux de faire quelque chose comme ceci:

    <form name="formFoo">
  Foo: <input type="radio" name="groupFoo" value="foo" checked> <br />
  Bar: <input type="radio" name="groupFoo" value="bar"> <br />
  Baz: <input type="radio" name="groupFoo" value="baz"> <br />
  <input type="submit" >
</form>

    Puis utiliser le JavaScript:

    function getRadioValue(formName, groupName) {
    var radioGroup = document[formName][groupName];
    for (var i=0; i<radioGroup.length; i++)  {
       if (radioGroup[i].checked)  {
       return radioGroup[i].value;
       }
    }
    return null;
}

    En faisant cela, vous éviter d'avoir à utiliser une fonction qui recherche dans l'ensemble du document. Il vient de recherche tout d'abord la forme, puis à l'intérieur de cette forme pour les contrôles du même nom. Le problème ici est que si vous avez une case à cocher dans le milieu de l'écran avec le même nom, il pourrait être renvoyée à la place de la radio correct de la valeur. Si un autre type de contrôle a été lancé avec le même nom, alors il peut causer une erreur. Deux de ces circonstances doit probablement être considérée comme programmeur d'erreur, mais il ne serait pas mal pour que la fonction puisse être étendu à vérifier pour eux, à un certain potentiel de perte de performance. Il suffit de changer la ligne:

           if (radioGroup[i].checked)  {

    :

           if (radioGroup[i].type=='radio' && radioGroup[i].checked)  {
  3. 6

    getElementsByName ne fonctionne pas pour moi. Je l'ai fait:

        var radios = document.getElementsByTagName('input');
    for (i = 0; i < radios.length; i++) {
        if (radios[i].type == 'radio' && radios[i].checked) {
            nbchecked++;
        }
    }
  4. 3
    var options = document.getElementsByName('myRadioButtons');
for(i = 0; i < options.length; i++)
{
    var opt = options[i];
    if(opt.type=="radio")
    {              
        if(opt.checked)
        {
        }                  
    }
}
  5. 2

    Je vais mordre pour le jQuery réponse

    var selectedValue = $("input[name='radio_name']:checked").val();
  6. 2
    <form name="myForm" id="myForm" action="">  
<input type="radio" name="radioButton" value="c1">Choice 1
<input type="radio" name="radioButton" value="c2">Choice 2
</form>
<script>
var formElements = window.document.getElementById("myForm").elements;
var formElement;
var radioArray = [];

for (var i = 0, j = 0; i < formElements.length; i++) {
    formElement = formElements.item(i);
    if (formElement.type === "radio" && formElement.name === "radioButton") {
        radioArray[j] = formElement;
        ++j;
    }
}
alert(radioArray[0].value);
alert(radioArray[1].value);
</script>
  7. 0
    $("input[type='radio'][name='xxxxx']:checked").val()
  8. 0

    Pour obtenir tous les boutons radio directement par leur nom:

    element.querySelectorAll("input[name='nameOfTheName']")

    La querySelectorAll() méthode peut être utilisée pour obtenir les éléments d'un certain type par son nom. Il y a des avantages à utiliser querySelectorAll par rapport à getElementsByName() dans certaines situations. Si vous utilisez getElementsByName sur autre chose que documentvous obtiendrez un message d'erreur:

    element_Name_Here.getElementsByName n'est pas une fonction

    Mais querySelectorAll() peut être utilisé sur les sous-éléments du document. Cette fonction est utile lorsque vous souhaitez obtenir un élément de multiples éléments qui ont tous la même structure (nombre de Lignes dans une liste). Dans ce cas, vous pourriez ne pas vouloir essayer d'attribuer l'ID à chaque ligne. Dans cette situation, la fonction appelée peut être passé thisobtenir le parentNode et de la mère, à la recherche d'un attribut spécifique. Cela évite d'avoir à les rechercher l'ensemble du document.

    html

    <div>
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
</div>
<div>
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
</div>
<div>
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
</div>
<div>
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
</div>

    script

    function getOnlyThisRowsRadios(thiz) {
  var i,L,parentElement,radioButtons;

  parentElement = thiz.parentNode;//Get the parent of the element
  radioButtons = parentElement.querySelectorAll("input[name='nameOfTheName']");
  console.log('radioButtons: ' + radioButtons)

  L = radioButtons.length;
  console.log('L: ' + L)

  for (i=0;i<L;i++) {
    console.log('radBttns[i].checked: ' + radBttns[i].checked)
    radBttns[i].checked = false;//Un-check all checked radios
  }