¿Cómo puedo determinar SelectedValue de RadioButtonList en JavaScript?

Question

Tengo una página web ASP.NET con una RadioButtonList con conexión de datos. No sé cuántos botones de opción se mostrarán en el momento del diseño. Necesito determinar SelectedValue en el cliente a través de JavaScript. He intentado lo siguiente sin mucha suerte:

var reasonCode = document.getElementById("RadioButtonList1"); 
var answer = reasonCode.SelectedValue; 

("respuesta" se devuelve como "indefinido") Por favor, perdona mi ignorancia JavaScript, pero ¿qué estoy haciendo mal?

Gracias de antemano.

Answer 1

ASP.NET representa una mesa y un montón de otras margen de ganancia en torno a las entradas de radio reales. El siguiente debe funcionar: -

var list = document.getElementById("radios"); //Client ID of the radiolist 
var inputs = list.getElementsByTagName("input"); 
var selected; 
for (var i = 0; i < inputs.length; i++) { 
     if (inputs[i].checked) { 
      selected = inputs[i]; 
      break; 
     } 
    } 
    if (selected) { 
     alert(selected.value); 
    } 

Answer 2

RadioButtonList es un control de servidor ASP.NET. Esto representa HTML para el navegador que incluye el botón de opción que está tratando de manipular usando JavaScript.

Recomendaría usar algo como IE Developer Toolbar (si prefiere Internet Explorer) o Firebug (si prefiere FireFox) para inspeccionar el resultado HTML y encontrar el ID del botón de opción que desea manipular en JavaScript.

Luego puede usar document.getElementByID("radioButtonID").checked desde JavaScript para averiguar si el botón de opción está seleccionado o no.

Answer 3

reasonCode.options [reasonCode.selectedIndex] .value

Answer 4

Siempre Ver código fuente. Encontrará que cada elemento de botón de radio tiene un ID único con el que puede trabajar e iterar a través de ellos para determinar cuál está marcado.

Editar: encuentra un ejemplo. Tengo una lista de botones de radio rbSearch. Esto está en un ascx llamado ReportFilter. En Ver código veo

ReportFilter1_rbSearch_0 
ReportFilter1_rbSearch_1 
ReportFilter1_rbSearch_2 

Así que puedes recorrer document.getElementById ("ReportFilter1_rbSearch_" + IDX) o tener una sentencia switch, y ver cuál ha .checked = true.

Answer 5

De here:

si (RadioButtonList1.SelectedIndex> -1)

{

Label1.Text = "Usted ha seleccionado:" + RadioButtonList1.SelectedItem.Text;

}

Answer 6

el HTML equivalente a RadioButtonList ASP.NET, es un conjunto de < input type = "radio"> con el mismo atributo de nombre (basado en la propiedad ID del RadioButtonList).

Puede acceder a este grupo de botones de radio usando getElementsByName. Esta es una colección de botones de radio, a los que se accede a través de su índice.

alert(document.getElementsByName('RadioButtonList1') [0].checked); 

Answer 7

Para un 'RadioButtonList con sólo 2 valores 'sí' y 'no', yo he hecho esto:

var chkval=document.getElemenById("rdnPosition_0") 

Aquí rdnposition_0 se refiere a la identificación de la ListItem sí. Lo obtuve al ver el código fuente del formulario.

Luego hice chkval.checked para saber si el valor 'Sí' está marcado.

Answer 8

function CheckRadioListSelectedItem(name) { 

    var radioButtons = document.getElementsByName(name); 
    var Cells = radioButtons[0].cells.length; 

    for (var x = 0; x < Cells; x++) { 
     if (document.getElementsByName(name + '_' + x)[0].checked) { 
      return x; 
     } 
    } 

    return -1; 
} 

Answer 9

Pruebe esto para obtener el valor seleccionado de RadioButtonList.

var selectedvalue = $('#<%= yourRadioButtonList.ClientID %> input:checked').val() 

Answer 10

me gustaría añadir la solución más sencilla a este problema:

var reasons= document.getElementsByName("<%=RadioButtonList1.UniqueID%>"); 
var answer; 
for (var j = 0; j < reasons.length; j++) { 
    if (reason[j].checked) { 
     answer = reason[j].value; 
    } 
} 

UniqueID es la propiedad que le dio el nombre de las entradas dentro del control, por lo que sólo puede comprobar a muy fácilmente.

Answer 11

He intentado varias formas de determinar el SelectedValue de RadioButtonList en Javascript sin ninguna alegría. Luego miré el HTML de la página web y me di cuenta de que ASP.NET representa un control RadioButtonList en una página web como una tabla HTML de una sola columna.

<table id="rdolst" border="0"> 
    <tr> 
    <td><input id="rdolst_0" type="radio" name="rdolst" value="Option 1" /><label for="rdolst_0">Option 1</label></td> 
    </tr> 
    <tr> 
    <td><input id="rdolst_1" type="radio" name="rdolst" value="Option 2" /><label for="rdolst_1">Option 2</label></td> 
    </tr> 
</table> 

Para acceder a una ListItem individual en el RadioButtonList a través de JavaScript, es necesario hacer referencia a ella en los controles secundarios de la célula (conocida como nodos en Javascript) en la fila correspondiente. Cada ListItem se representa como el primer elemento (cero) en la primera celda (cero) en su fila.

Este ejemplo se recorre la RadioButtonList para mostrar la SelectedValue:

var pos, rdolst; 

for (pos = 0; pos < rdolst.rows.length; pos++) { 
    if (rdolst.rows[pos].cells[0].childNodes[0].checked) { 
     alert(rdolst.rows[pos].cells[0].childNodes[0].value); 
     //^ Returns value of selected RadioButton 
    } 
} 

Para seleccionar el último elemento de la RadioButtonList, que podría hacer esto:

rdolst.rows[rdolst.rows.length - 1].cells[0].childNodes[0].checked = true; 

Así que interactúa con un RadioButtonList en Javascript es muy parecido a trabajar con una mesa normal. Como dije, probé la mayoría de las otras soluciones, pero esta es la única que funciona para mí.

Answer 12

Quería ejecutar el script ShowShouldWait solo si el Page_ClientValidate era true. Al final del script, se devuelve el valor de b para evitar el evento postback en el caso de que no sea válido.

En caso de que alguien tenga curiosidad, la llamada ShouldShowWait se utiliza para mostrar solo "espere por favor" div si el tipo de salida seleccionado es "HTML" y no "CSV".

onclientclick="var isGood = Page_ClientValidate('vgTrxByCustomerNumber');if(isGood){ShouldShowWait('optTrxByCustomer');} return isGood"