使用javascript循环浏览asp.net单选按钮列表以获取所选值和文本

Question

我正在创建一个问答页面，答案是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'）；以及未定义的报告。我需要帮助。

Answer 1

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

或者做：

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

Answer 2

这适用于我的

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