Wie kann ich den SelectedValue einer RadioButtonList in JavaScript ermitteln?

Question

Ich habe eine ASP.NET-Webseite mit einer datengebundenen RadioButtonList. Ich weiß nicht, wie viele Optionsfelder zur Entwurfszeit gerendert werden. Ich muss den SelectedValue auf dem Client über JavaScript ermitteln. Ich habe folgendes ohne viel Glück versucht:

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

(„Antwort“ als „undefiniert“ zurückgegeben wird) Bitte verzeihen Sie meine JavaScript Ignoranz, aber was mache ich falsch?

Vielen Dank im Voraus.

Answer 1

ASP.NET rendert eine Tabelle und ein Bündel anderen Mark-up um die eigentlichen Funkeingänge. Folgendes sollte funktionieren: -

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 ist ein ASP.NET-Serversteuerelement. Dadurch wird HTML in den Browser gerendert, der den Optionsschalter enthält, den Sie mithilfe von JavaScript bearbeiten möchten.

Ich würde empfehlen, etwas wie die IE Developer Toolbar (wenn Sie Internet Explorer bevorzugen) oder Firebug (wenn Sie FireFox bevorzugen), um die HTML-Ausgabe zu überprüfen und finden Sie die ID der Radio-Taste, die Sie in JavaScript manipulieren möchten.

Dann können Sie document.getElementByID("radioButtonID").checked von JavaScript verwenden, um herauszufinden, ob der Radio-Button ausgewählt ist oder nicht.

Answer 3

reasonCode.options [reasonCode.selectedIndex] .value

Answer 4

ich immer Quelle anzeigen. Sie werden feststellen, dass jedes Optionsfeld eine eindeutige ID hat, mit der Sie arbeiten können, und durchlaufen Sie sie, um herauszufinden, welche Option aktiviert ist.

Edit: ein Beispiel gefunden. Ich habe eine Radio-Button-Liste rbSearch. Dies ist in einem Ascx namens ReportFilter. In View Source sehe ich

ReportFilter1_rbSearch_0 
ReportFilter1_rbSearch_1 
ReportFilter1_rbSearch_2 

So können Sie entweder eine Schleife durch document.getElementById ("ReportFilter1_rbSearch_" + idx) oder eine switch-Anweisung haben, und sehen, welche = true .checked hat.

Answer 5

Von here:

if (RadioButtonList1.SelectedIndex> -1)

{

Label1.Text = "Sie ausgewählt:" + RadioButtonList1.SelectedItem.Text;

}

Answer 6

Die HTML-äquivalent zu ASP.NET Radiobuttonlist, ist ein Satz von < input type = „radio“> mit dem gleichen Namen Attribute (basierend auf ID-Eigenschaft der Radiobuttonlist).

Sie können mit getElementsByName auf diese Gruppe von Optionsfeldern zugreifen. Dies ist eine Sammlung von Optionsfeldern, auf die über ihren Index zugegriffen wird.

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

Answer 7

Für eine ‚Radiobuttonlist mit nur 2 Werte 'Ja' und 'Nein', Ich habe dies getan:

var chkval=document.getElemenById("rdnPosition_0") 

Hier bezieht sich rdnposition_0 auf die ID der ja ListItem. Ich habe es bekommen, indem ich den Quellcode des Formulars angesehen habe.

Dann habe ich chkval.checked, um zu wissen, ob der Wert "Ja" aktiviert ist.

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

Versuchen Sie dies, um den ausgewählten Wert aus der RadioButtonList zu erhalten.

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

Answer 10

Ich möchte die einfachste Lösung für dieses Problem hinzu:

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 ist die Eigenschaft, dass Sie den Namen der Eingänge innerhalb der Steuer gab, so dass Sie nur sie wirklich überprüfen leicht.

Answer 11

Ich habe verschiedene Möglichkeiten ausprobiert, einen SelectedValue von RadioButtonList in Javascript ohne Freude zu bestimmen. Dann schaute ich auf den HTML-Code der Webseite und erkannte, dass ASP.NET ein RadioButtonList-Steuerelement auf einer Webseite als einspaltige HTML-Tabelle darstellt!

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

Um einen einzelnen ListItem auf der Radiobuttonlist durch Javascript zuzugreifen, müssen Sie es innerhalb der Zelle untergeordneten Steuerelemente verweisen auf die entsprechende Zeile (als Knoten in Javascript bekannt). Jedes ListItem wird als erstes (Null-) Element in der ersten (Null-) Zelle in seiner Zeile gerendert.

Dieses Beispiel Schleifen durch die Radiobuttonlist die SelectedValue anzuzeigen:

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

Um das letzte Element in der Radiobuttonlist zu wählen, würden Sie dies tun:

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

So mit einem Radiobuttonlist in Javascript in Wechselwirkung ist sehr ähnlich wie mit einem normalen Tisch zu arbeiten. Wie gesagt, ich habe die meisten anderen Lösungen ausprobiert, aber das ist das einzige, was für mich funktioniert.

Answer 12

Ich wollte das Skript ShowShouldWait nur ausführen, wenn die Page_ClientValidatetrue war. Am Ende des Skripts wird der Wert von b zurückgegeben, um das Ereignis postback zu verhindern, falls es nicht gültig ist.

Falls jemand neugierig ist, wird der ShouldShowWait Aufruf verwendet, um nur die "Bitte warten" div anzuzeigen, wenn der ausgewählte Ausgabetyp "HTML" und nicht "CSV" ist.

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