使用javascript循环通过asp.net单选按钮列表以获取选定的值和文本

Question

I am creating a questions and answers page and the answers are a collection of asp.net radiobuttonlist as per the following: `

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

Now, I am using the following JavaScript function to loop through to find out which one the user selected. The following is the JavaScript code.

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;

}

The problem now is, it always breaks on this line var radioButtonListArray = elementRef.getElementsByTagName('input'); and reports that is undefined. I need help please.

Answer 1

Try to put ClientIDMode="Static" in asp:RadioButtonList so you are able to get it in Javascript.

or do:

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

Answer 2

This works for me

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>

Or You can get it in one line using JQuery like

 $(document).ready(function () {

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

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

        });