Como dice el título, ¿cuál es la mejor manera en JavaScript para obtener todos los botones de radio en una página con un ¿nombre de pila? Finalmente, usaré esto para determinar qué botón de radio específico está seleccionado, así que otra forma de formular la pregunta:

Dada una variable de cadena en JavaScript, ¿cómo puedo saber qué elemento de entrada de botón de radio exacto (si lo hay) con esa cadena como su nombre está actualmente seleccionado?

no estoy usando jQuery. Si desea proporcionar una respuesta jQuery, continúe. Alguien más podría encontrarlo útil. Pero no me ayudará y no lo votaré.

14
Joel Coehoorn 5 nov. 2009 a las 22:29

8 respuestas

La mejor respuesta

Puede usar document.getElementsByName(), pasando el nombre del grupo de radio, luego recorrerlos inspeccionando el atributo checked, p. algo como:

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;
}
26
Rob 5 nov. 2009 a las 19:34

Para obtener todos los botones de radio directamente por nombre:

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

El método querySelectorAll() se puede usar para obtener elementos de un determinado tipo por nombre. Existen ventajas al usar querySelectorAll en comparación con getElementsByName() en ciertas situaciones. Si usa getElementsByName en algo que no sea document, recibirá un error:

element_Name_Here.getElementsByName no es una función

Pero querySelectorAll() se puede usar en subelementos del documento. Esto es útil cuando desea obtener un elemento de múltiples elementos que tienen la misma estructura (Filas en una lista). En ese caso, es posible que no desee intentar dar identificaciones separadas a cada fila. En esa situación, la función llamada se puede pasar this, obtener el ParentNode y desde el padre, buscar un atributo específico. Esto evita la necesidad de buscar en todo el documento.

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>

Guión

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
  }
0
Alan Wells 8 mar. 2017 a las 21:03
$("input[type='radio'][name='xxxxx']:checked").val()
0
Mihai Iorga 28 ago. 2012 a las 11:50
<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>
2
GR1000GR1000 5 nov. 2009 a las 19:58

Morderé por la respuesta de jQuery

var selectedValue = $("input[name='radio_name']:checked").val();
3
Bob 5 nov. 2009 a las 19:36
var options = document.getElementsByName('myRadioButtons');
for(i = 0; i < options.length; i++)
{
    var opt = options[i];
    if(opt.type=="radio")
    {              
        if(opt.checked)
        {
        }                  
    }
}
3
Phaedrus 5 nov. 2009 a las 19:35

GetElementsByName no funcionó para mí. Hice esto:

    var radios = document.getElementsByTagName('input');
    for (i = 0; i < radios.length; i++) {
        if (radios[i].type == 'radio' && radios[i].checked) {
            nbchecked++;
        }
    }
6
Robin 21 mar. 2011 a las 11:47

Use document.getElementsByName () es la respuesta corta a la pregunta que hizo.

Sin embargo, puede ser mejor hacer algo como esto:

<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> 

Luego usa el 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;
}

Al hacer esto, evita tener que usar una función que busca en todo el documento. Simplemente busca primero el formulario, luego dentro de ese formulario los controles con el mismo nombre. El problema aquí es que si tuviera una casilla de verificación en el medio del formulario con el mismo nombre, podría devolverse en lugar del valor de radio correcto. Si se lanzó otro tipo de control con el mismo nombre, podría causar un error. Ambas circunstancias probablemente deberían considerarse un error del programador, pero no estaría de más que la función se expanda para verificarlas, con alguna posible pérdida de rendimiento. Solo cambia la línea:

       if (radioGroup[i].checked)  {

Para:

       if (radioGroup[i].type=='radio' && radioGroup[i].checked)  {
8
Peter Mortensen 18 nov. 2009 a las 20:11