如何确定 JavaScript 中 RadioButtonList 的 SelectedValue？

Posted 2023-03-05

【中文标题】如何确定 JavaScript 中 RadioButtonList 的 SelectedValue？

【英文标题】：How can I determine the SelectedValue of a RadioButtonList in JavaScript?

【发布时间】：2010-10-09 10:32:33

【问题描述】：

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

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

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

提前致谢。

【参考方案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);
  

【讨论】：

如果您不知道页面上将显示多少个单选按钮，此答案效果最佳。谢谢！

我真的希望有一个更简单的答案，但我找不到更好的答案

非常感谢！帮助我停止了我的困惑:)

不错@john Foster。即使在 11 年后它也帮助了我

非常感谢，这节省了我的时间

【参考方案2】：

试试这个从 RadioButtonList 中获取选定的值。

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

【讨论】：

他要求使用 javascript。 Jquery 更容易编写，也更短。你的回答对那些正在寻找通过 javascript 执行此操作的人没有帮助。我不会拒绝你的答案，而是坚持这个问题。

【参考方案3】：

我总是查看源代码。您会发现每个单选按钮项都有一个唯一的 id，您可以使用并遍历它们以确定哪个是 Checked。

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

ReportFilter1_rbSearch_0
ReportFilter1_rbSearch_1
ReportFilter1_rbSearch_2

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

【参考方案4】：

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

我建议使用IE Developer Toolbar（如果您更喜欢 Internet Explorer）或Firebug（如果您更喜欢 FireFox）来检查 HTML 输出并找到要在 JavaScript 中操作的单选按钮的 ID .

然后你可以使用 JavaScript 中的document.getElementByID("radioButtonID").checked 来判断单选按钮是否被选中。

【参考方案5】：

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

您可以使用 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】：

对于只有两个值“是”和“否”的“RadioButtonList”，我已经这样做了：

var chkval=document.getElemenById("rdnPosition_0")

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

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

【讨论】：

OP 说：'我不知道在设计时会渲染多少个单选按钮'--> 所以他不能像那样使用静态 id，因为你不知道有多少会有元素。现在 _0 是“是”，但是当您更改按钮时，_0 可以是“否”。可维护性的糟糕解决方案

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

【讨论】：

太棒了，这对我来说效果很好，已经为此苦苦挣扎了一段时间，找到我的单选按钮列表控件时遇到问题，因为它位于 ContentPlaceHolder 中，这会在渲染时弄乱 ID。通过使用 UniqueID 设置 ID 效果很好。谢谢。

【参考方案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 交互非常类似于使用常规表格。就像我说的那样，我已经尝试了大多数其他解决方案，但这是唯一适合我的解决方案。

【参考方案10】：

我只想在Page_ClientValidate 是true 时执行ShowShouldWait 脚本。在脚本结束时，返回 b 的值，以防止 postback 事件在它无效的情况下发生。

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

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

【参考方案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;
    

【参考方案12】：

reasonCode.options[reasonCode.selectedIndex].value

【讨论】：

您确定 reasonCode 将实际包含表单字段吗？我希望它是 RadioButtonList 的外部容器元素。

【参考方案13】：

来自here：

if (RadioButtonList1.SelectedIndex > -1) 

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

【讨论】：

这些代码示例是服务器端的“runat=server”。他正在寻找客户端代码，这当然不遵循 ASP.NET 对象模型。