如何确定JavaScript中一个RadioButtonList的SelectedValue ?

I have an ASP.NET web page with a databound RadioButtonList. I do not know how many radio buttons will be rendered at design time. I need to determine the SelectedValue on the client via JavaScript. I've tried the following without much luck:

我有一个ASP。NET web页面，带有一个databound的RadioButtonList。我不知道在设计时将会呈现多少个单选按钮。我需要通过JavaScript确定客户端的SelectedValue。我试过以下方法，但运气不太好:

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

("answer" is being returned as "undefined") Please forgive my JavaScript ignorance, but what am I doing wrong?

(“answer”被返回为“undefined”)请原谅我的JavaScript无知，但我做错了什么?

Thanks in advance.

提前谢谢。

12 个解决方案

#1

ASP.NET renders a table and a bunch of other mark-up around the actual radio inputs. The following should work:-

ASP。NET呈现了一个表和一堆其他标记，这些标记围绕着实际的无线电输入。以下工作:-

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

#2

Try this to get the selected value from the RadioButtonList.

尝试从RadioButtonList获取选定的值。

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

#3

I always View Source. You will find each radio button item to have a unique id you can work with and iterate through them to figure out which one is Checked.

我总是查看源代码。您将发现每个单选按钮项都有一个惟一的id，您可以使用它并对它们进行迭代，以确定选中了哪个按钮。

Edit: found an example. I have a radio button list rbSearch. This is in an ascx called ReportFilter. In View Source I see

编辑:发现一个例子。我有一个单选按钮列表rbSearch。这是在一个叫做ReportFilter的ascx中。在查看源我看到

ReportFilter1_rbSearch_0
ReportFilter1_rbSearch_1
ReportFilter1_rbSearch_2

So you can either loop through document.getElementById("ReportFilter1_rbSearch_" + idx ) or have a switch statement, and see which one has .checked = true.

所以你可以对文档进行循环。getElementById(“ReportFilter1_rbSearch_”+ idx)或具有一个switch语句，并查看哪个有.checked = true。

#4

RadioButtonList is an ASP.NET server control. This renders HTML to the browser that includes the radio button you are trying to manipulate using JavaScript.

RadioButtonList是一个ASP。网络服务器控件。这将HTML呈现给浏览器，其中包括您试图使用JavaScript操作的单选按钮。

I'd recommend using something like the IE Developer Toolbar (if you prefer Internet Explorer) or Firebug (if you prefer FireFox) to inspect the HTML output and find the ID of the radio button you want to manipulate in JavaScript.

我建议使用IE Developer工具栏(如果你喜欢IE)或Firebug(如果你喜欢FireFox)来检查HTML输出并找到你想要在JavaScript中操作的单选按钮的ID。

Then you can use document.getElementByID("radioButtonID").checked from JavaScript to find out whether the radio button is selected or not.

然后可以使用document.getElementByID(“radioButtonID”)。从JavaScript检查单选按钮是否被选中。

#5

The HTML equivalent to ASP.NET RadioButtonList, is a set of <input type="radio"> with the same name attribute(based on ID property of the RadioButtonList).

HTML相当于ASP。NET RadioButtonList，是一组，具有相同的name属性(基于RadioButtonList的ID属性)。

You can access this group of radio buttons using getElementsByName. This is a collection of radio buttons, accessed through their index.

您可以使用getElementsByName访问这组单选按钮。这是一组单选按钮，通过它们的索引访问。

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

#6

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

#7

For a 'RadioButtonList with only 2 values 'yes' and 'no', I have done this:

对于一个只有两个值“是”和“不是”的“RadioButtonList”，我这样做了:

var chkval=document.getElemenById("rdnPosition_0")

Here rdnposition_0 refers to the id of the yes ListItem. I got it by viewing the source code of the form.

这里rdnposition_0表示yes ListItem的id。我通过查看表单的源代码得到了它。

Then I did chkval.checked to know if the value 'Yes' is checked.

然后我chkval。检查是否检查值“Yes”。

#8

I would like to add the most straightforward solution to this problem:

我想为这个问题添加最直接的解决方案:

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 is the property that gave you the name of the inputs inside the control, so you can just check them really easily.

UniqueID是一个赋予你在控件内部标注输入名称的属性，这样你就可以很容易地检查它们了。

#9

reasonCode.options[reasonCode.selectedIndex].value

reasonCode.options reasonCode.selectedIndex value

#10

From here:

从这里开始:

if (RadioButtonList1.SelectedIndex > -1)

如果(RadioButtonList1。SelectedIndex > 1)

{

{

Label1.Text = "You selected: " + RadioButtonList1.SelectedItem.Text;

Label1。文本= "You selected: " + RadioButtonList1.SelectedItem.Text;

}

}

#11

I've tried various ways of determining a RadioButtonList's SelectedValue in Javascript with no joy. Then I looked at the web page's HTML and realised that ASP.NET renders a RadioButtonList control to a web page as a single-column HTML table!

我尝试了各种方法来确定一个RadioButtonList的SelectedValue在Javascript中的位置。然后我查看了网页的HTML，发现了ASP。NET将一个RadioButtonList控件呈现到一个web页面，作为一个单列HTML表!

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

To access an individual ListItem on the RadioButtonList through Javascript, you need to reference it within the cell's child controls (known as nodes in Javascript) on the relevant row. Each ListItem is rendered as the first (zero) element in the first (zero) cell on its row.

要通过Javascript访问RadioButtonList上的单个ListItem，您需要在相关行的cell的子控件(即Javascript中的节点)中引用它。每个ListItem被呈现为其行的第一个(0)单元中的第一个(0)元素。

This example loops through the RadioButtonList to display the SelectedValue:

此示例循环遍历RadioButtonList以显示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
    }
}

To select the last item in the RadioButtonList, you would do this:

要选择RadioButtonList中的最后一项，您需要这样做:

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

So interacting with a RadioButtonList in Javascript is very much like working with a regular table. Like I say I've tried most of the other solutions out there but this is the only one which works for me.

因此，在Javascript中与RadioButtonList的交互非常类似于使用常规表。就像我说的，我已经尝试了很多其他的解决方法但是这是唯一一个对我有效的方法。

#12

I wanted to execute the ShowShouldWait script only if the Page_ClientValidate was true. At the end of the script, the value of b is returned to prevent the postback event in the case it is not valid.

我希望只在Page_ClientValidate为真时执行ShowShouldWait脚本。在脚本的末尾，返回b的值，以防止回发事件在它无效的情况下发生。

In case anyone is curious, the ShouldShowWait call is used to only show the "please wait" div if the output type selected is "HTML" and not "CSV".

如果有人好奇，应该使用ShouldShowWait调用来显示“请等待”div，如果选择的输出类型是“HTML”而不是“CSV”。

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

#1