使用 javascript 循环遍历 asp.net 单选按钮列表以获取选定的值和文本答案

【问题标题】：using javascript to loop through asp.net radio button list to get selected value and text使用 javascript 循环遍历 asp.net 单选按钮列表以获取选定的值和文本
【发布时间】：2015-04-20 20:49:24
【问题描述】：

我正在创建一个问题和答案页面，答案是 asp.net 单选按钮列表的集合，如下所示：`

<div class="col-md-4">
                <asp:RadioButtonList ID="Q1AnswersRadioButtonList" runat="server" RepeatLayout="Flow">
                    <asp:ListItem Value="Q1OptionARadioButton"></asp:ListItem>
                    <asp:ListItem Value="Q1OptionBRadioButton"></asp:ListItem>
                    <asp:ListItem Value="Q1OptionCRadioButton"></asp:ListItem>
                    <asp:ListItem Value="Q1OptionDRadioButton"></asp:ListItem>
                </asp:RadioButtonList>
                <br />
                &nbsp;<textarea class="text-danger" id="Q1CorrectAnswerText" name="Q1CorrectAnswerText" readonly="readonly" wrap="soft"></textarea>
            </div>

现在，我正在使用以下 JavaScript 函数循环查找用户选择了哪一个。以下是 JavaScript 代码。

function GetUserAnswerOneSelection()
{
var elementRef = document.getElementById('Q1AnswersRadioButtonList');
var radioButtonListArray = elementRef.getElementsByTagName('input');
var checkedValues = '';

for (var i = 0; i < radioButtonListArray.length; i++) {
    var radioButtonRef = radioButtonListArray[i];

    if (radioButtonRef.checked == true) {
        // To get the Text property, use this code:
        var labelArray =   radioButtonRef.parentNode.getElementsByTagName('label');
        if (labelArray.length > 0) {
            if (checkedValues.length > 0)
                checkedValues += ', ';
            checkedValues += labelArray[i].innerHTML;
        }
    }
}

userAnswer1 = checkedValues;
return userAnswer1;

}

现在的问题是，它总是在这一行中断 var radioButtonListArray = elementRef.getElementsByTagName('input'); 并报告未定义。我需要帮助。

【问题讨论】：

你确定elementRef在这里不为空吗？ WebForms 有一个烦人的特性，它不会用你在代码中指定的 ID 来命名你的对象。
您使用的是什么版本的 .NET？旧版本倾向于在控件名称前加上其容器的名称（当然还有经典的“ctl00”东西）——因此您在代码中键入的 id 可能会以不同的方式呈现，因此无法找到，从而使 elementRef 为空。使用较新的版本（我认为是 4 版本）允许您在呈现 HTML 时指定命名约定，因此您可以将其设置为“静态”，以便按字面意思输出名称。
哪个浏览器？是火狐吗？
非常感谢。是的，它给了我空值。我正在使用 Visual Studio 2013 社区版。我不知道该怎么办。我现在很沮丧大约3天。请问我该怎么办？
我在 Windows 10 技术预览版上使用 Internet Explorer，还使用了 firefox、chrome 和 maxthon

标签： javascript c# asp.net radio-button

【解决方案1】：

这对我有用

function GetUserAnswerOneSelection() {
            var elementRef = document.getElementById("Q1AnswersRadioButtonList");
            var radioButtonListArray = elementRef.getElementsByTagName('input');
            var checkedValues = '';

            for (var i = 0; i < radioButtonListArray.length; i++) {
                var radioButtonRef = radioButtonListArray[i];

                if (radioButtonRef.checked == true) {
                    // To get the Text property, use this code:
                    var labelArray = radioButtonRef.parentNode.getElementsByTagName('label');
                    if (labelArray.length > 0) {
                        if (checkedValues.length > 0)
                            checkedValues += ', ';
                        checkedValues += labelArray[i].innerHTML;
                    }
                }
            }

            userAnswer1 = checkedValues;              
        }

   <asp:RadioButtonList ID="Q1AnswersRadioButtonList" runat="server" RepeatLayout="Flow" ClientIDMode="Static">
        <asp:ListItem Value="Q1OptionARadioButton"></asp:ListItem>
        <asp:ListItem Value="Q1OptionBRadioButton"></asp:ListItem>
        <asp:ListItem Value="Q1OptionCRadioButton"></asp:ListItem>
        <asp:ListItem Value="Q1OptionDRadioButton"></asp:ListItem>
    </asp:RadioButtonList>

或者您可以使用 JQuery 之类的一行来获取它

 $(document).ready(function () {

            $("#Q1AnswersRadioButtonList input").click(function () {
                GetUserAnswerOneSelection();

                alert( $("#Q1AnswersRadioButtonList input:checked").next("label").html());
            });

        });

【讨论】：

Ajay，我要试试 jQuery 的，它看起来简单又漂亮。
您好 Bainn，如果您认为自己得到了答案，请将其标记为答案。

【解决方案2】：

尝试将ClientIDMode="Static" 放在asp:RadioButtonList 中，这样您就可以在Javascript 中获取它。

或者做：

var elementRef = document.getElementById('<%= Q1AnswersRadioButtonList.ClientID %>');**

【讨论】：

您好，谢谢先生。但不幸的是，我仍然遇到同样的错误：0x800a138f - JavaScript 运行时错误：无法获取未定义或空引用的属性“getElementsByTagName”。
是的，大卫，我没有很好地阅读您的选择。我把它们混合在一起。我使用了顶部的名称和名称，它起作用了。真的非常感谢。