如何在 JavaScript 中确定 RadioButtonList 的 SelectedValue？

Question

我有一个带有数据绑定 RadioButtonList 的 ASP.NET 网页。 我不知道在设计时会渲染多少个单选按钮。 我需要通过 JavaScript 确定客户端上的 SelectedValue。 我尝试了以下操作，但运气不佳：（

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

“答案”被返回为“未定义”） 请原谅我对 JavaScript 的无知，但我做错了什么？

提前致谢。

Answer 1

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

Answer 2

尝试此操作以从 RadioButtonList 中获取选定的值。

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

Answer 3

我总是查看源代码。 您会发现每个单选按钮项目都有一个唯一的 ID，您可以使用它并迭代它们以找出选中了哪一个。

编辑：找到一个例子。 我有一个单选按钮列表 rbSearch。 这是在一个名为 ReportFilter 的 ascx 中。 在“查看源代码”中，我看到

ReportFilter1_rbSearch_0
ReportFilter1_rbSearch_1
ReportFilter1_rbSearch_2

“因此，您可以循环遍历 document.getElementById("ReportFilter1_rbSearch_" + idx ) 或使用 switch 语句，然后查看哪一个具有 .checked = true。

Answer 4

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

我建议使用类似 IE 开发人员工具栏（如果您喜欢 Internet Explorer）或 Firebug（如果您喜欢FireFox）来检查 HTML 输出并找到要在 JavaScript 中操作的单选按钮的 ID。

然后，您可以使用 JavaScript 中的 document.getElementByID("radioButtonID").checked 来确定单选按钮是否被选中。

Answer 5

HTML 相当于 ASP.NET RadioButtonList，是一组 元素。 具有相同的名称属性（基于 RadioButtonList 的 ID 属性）。

您可以使用 getElementsByName 访问这组单选按钮。
这是单选按钮的集合，可通过其索引访问。

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

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

Answer 7

对于只有 2 个值“yes”和“no”的“RadioButtonList”，我这样做了：

var chkval=document.getElemenById("rdnPosition_0")

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

然后我执行 chkval.checked 以了解是否检查了值“Yes”。

Answer 8

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

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 是为您提供控件内输入名称的属性，因此您可以非常轻松地检查它们。

Answer 9

我尝试了各种方法来确定 JavaScript 中 RadioButtonList 的 SelectedValue，但没有任何乐趣。 然后我查看了网页的 HTML，发现 ASP.NET 将 RadioButtonList 控件呈现为网页作为单列 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>

要通过 Javascript 访问 RadioButtonList 上的单个 ListItem，您需要在相关行上的单元格子控件（在 Javascript 中称为节点）内引用它。 每个 ListItem 都呈现为其行上第一个（零）单元格中的第一个（零）元素。

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

要选择 RadioButtonList 中的最后一项，您可以执行以下操作：

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

因此，在 Javascript 中与 RadioButtonList 进行交互非常类似于使用常规表格。 就像我说的，我已经尝试了大多数其他解决方案，但这是唯一适合我的解决方案。

Answer 10

我想仅当 Page_ClientValidate 为 true 时才执行 ShowShouldWait 脚本。 在脚本末尾，返回 b 的值，以防止在无效的情况下发生postback 事件。

如果有人好奇，如果选择的输出类型是“HTML”而不是“CSV”，则 ShouldShowWait 调用仅用于显示“请稍候”div。

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

Answer 11

要在 JavaScript 中检查下拉列表的选定索引：

function SaveQuestion() {
    var ddlQues = document.getElementById("<%= ddlQuestion.ClientID %>");
    var ddlSubQues = document.getElementById("<%=ddlSecondaryQuestion.ClientID%>");

    if (ddlQues.value != "" && ddlSubQues.value != "") {
        if (ddlQues.options[ddlQues.selectedIndex].index != 0 ||
            ddlSubQues.options[ddlSubQues.selectedIndex].index != 0) {
            return true;
        } else {
            return false;
        }
    } else {
        alert("Please select the Question or Sub Question.");
        return false;
    }
}

Answer 12

reasonCode.options[reasonCode.selectedIndex].value

Answer 13

来自此处：

if (RadioButtonList1.SelectedIndex > -1) 
{
    Label1.Text = "You selected: " + RadioButtonList1.SelectedItem.Text;
}