Come posso determinare il valore selezionato di un oggetto RadioButtonList in JavaScript?

Question

Ho una pagina Web ASP.NET con un database RadioButtonList. Non so quanti pulsanti radio saranno visualizzati in fase di progettazione. Ho bisogno di determinare il SelectedValue sul client tramite JavaScript. Ho provato quanto segue senza molta fortuna:

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

("risposta" viene restituito come "indefinito") Si prega di perdonare la mia ignoranza JavaScript, ma quello che sto facendo di sbagliato?

Grazie in anticipo.

Answer 1

ASP.NET rende un tavolo e un sacco di altre ricarico attorno ingressi radiofonici reali. Il seguente dovrebbe funzionare: -

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 è un controllo server ASP.NET. Questo rende HTML al browser che include il pulsante di opzione che stai tentando di manipolare utilizzando JavaScript.

Si consiglia di utilizzare qualcosa come IE Developer Toolbar (se si preferisce Internet Explorer) o Firebug (se si preferisce FireFox) per ispezionare l'output HTML e trovare l'ID del pulsante di opzione che si desidera manipolare in JavaScript.

Quindi è possibile utilizzare document.getElementByID("radioButtonID").checked da JavaScript per scoprire se il pulsante di opzione è selezionato o meno.

Answer 3

reasonCode.options [reasonCode.selectedIndex] .value

Answer 4

ho sempre fonte di vista. Troverai ogni elemento del pulsante radio per avere un ID univoco su cui puoi lavorare e iterare attraverso di essi per capire quale è selezionato.

Modifica: trovato un esempio. Ho un elenco di pulsanti di opzione rbSearch. Questo è in un ascx chiamato ReportFilter. In Visualizza origine vedo

ReportFilter1_rbSearch_0 
ReportFilter1_rbSearch_1 
ReportFilter1_rbSearch_2 

Quindi è possibile scorrere document.getElementById ("ReportFilter1_rbSearch_" + IDX) o avere un'istruzione switch, e vedere uno che ha .checked = true.

Answer 5

Da here:

se (RadioButtonList1.SelectedIndex> -1)

{

Label1.Text = "Hai selezionato:" + RadioButtonList1.SelectedItem.Text;

}

Answer 6

Il codice HTML equivalente ad ASP.NET RadioButtonList, è un insieme di < input type = "radio"> con lo stesso attributo name (sulla base di proprietà ID del RadioButtonList).

È possibile accedere a questo gruppo di pulsanti di opzione utilizzando getElementsByName. Questa è una raccolta di pulsanti di opzione, accessibili tramite il loro indice.

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

Answer 7

Per un 'RadioButtonList con solo 2 valori 'sì' e 'no', ho fatto questo:

var chkval=document.getElemenById("rdnPosition_0") 

Qui rdnposition_0 si riferisce alla id del sì ListItem. Ho capito visualizzando il codice sorgente del modulo.

Quindi ho fatto chkval.checked per sapere se il valore 'Sì' è spuntato.

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

Prova questo per ottenere il valore selezionato dal RadioButtonList.

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

Answer 10

vorrei aggiungere la soluzione più semplice a questo 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 è la proprietà che ti ha dato il nome degli ingressi all'interno del controllo, in modo da poter semplicemente controllare davvero facilmente.

Answer 11

Ho provato vari modi per determinare il valore selezionato di un RadioButtonList in Javascript senza alcuna gioia. Poi ho esaminato l'HTML della pagina Web e ho realizzato che ASP.NET esegue il rendering di un controllo RadioButtonList su una pagina Web come tabella HTML a colonna singola!

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

Per accedere a un ListItem individuale sul RadioButtonList tramite Javascript, è necessario fare riferimento all'interno controlli figlio della cellula (noto come nodi in Javascript) sulla riga corrispondente. Ogni ListItem viene reso come il primo (zero) elemento nella prima cella (zero) sulla sua riga.

Questo esempio scorre il RadioButtonList per visualizzare 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 
    } 
} 

Per selezionare l'ultimo elemento della RadioButtonList, si dovrebbe fare questo:

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

Quindi, l'interazione con un RadioButtonList in Javascript è molto simile a lavorare con una tabella normale. Come ho detto, ho provato la maggior parte delle altre soluzioni là fuori, ma questa è l'unica che funziona per me.

Answer 12

Ho voluto eseguire lo script ShowShouldWait solo se lo Page_ClientValidate era true. Alla fine dello script, viene restituito il valore di b per impedire l'evento postback nel caso in cui non sia valido.

Nel caso in cui qualcuno sia curioso, la chiamata ShouldShowWait viene utilizzata per mostrare solo "attendere prego" div se il tipo di output selezionato è "HTML" e non "CSV".

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