Как найти выбранный элемент из списка радиокнопок с помощью javascript

Мне нужно найти выбранный элемент из списка переключателей с помощью javascript... Вот мой код

  <asp:RadioButtonList name="test" ID="RadioButtonList1"  runat="server">
    <asp:ListItem Text="List1" Value="1"></asp:ListItem>
    <asp:ListItem Text="List2" Value="3"></asp:ListItem>
    </asp:RadioButtonList>
    <asp:Button Text="test" runat="server" OnClientClick=" GetListItem()" />

сценарий:

<script type="text/javascript" language="javascript">
function GetListItem() {
    var id = document.getElementById("<%=RadioButtonList1.ClientID%>");
    alert(id.selectedItem.value())//Error: 'selectedItem' is null or not an object;
}

How can i find selectedItem from that list


person Suresh    schedule 20.02.2012    source источник
comment
Если мой ответ работает для вас, пожалуйста, отметьте это как ответ.   -  person lunarquaker    schedule 28.08.2015


Ответы (4)


Вот довольно простой способ сделать это. Если вы хотите найти выбранный элемент списка, когда пользователь щелкает, добавьте атрибут onclick к каждому из элементов в RadioButtonList с помощью функции javascript, которая будет вызываться при щелчке элемента списка. Параметр this передаст элемент списка функции javascript:

<asp:RadioButtonList name="test" ID="RadioButtonList1"  runat="server">
<asp:ListItem Text="List1" Value="1" onclick="myListItemClick(this);"></asp:ListItem>
<asp:ListItem Text="List2" Value="3" onclick="myListItemClick(this);"></asp:ListItem>
</asp:RadioButtonList>

Обратите внимание, что атрибут onclick не распознается ASP.NET intellisense для элементов управления ListItem, но он по-прежнему запускает функцию javascript на стороне клиента.

Теперь в вашей функции javascript:

function myListItemClick(e) {
    alert('Selected value: ' + e.value);
}

Обязательно добавьте атрибут «Value» ко всем элементам списка, чтобы это работало правильно (как вы уже сделали).

Если вы не хотите делать это, когда пользователь щелкает, вы можете сделать это таким образом. В вашей разметке:

<script type="text/javascript" language="javascript">
        var radioList = '<%= RadioButtonList1.ClientID %>';
</script>

Затем в вашем javascript:

function getSelectedListItem() {
   var radioButtonList = document.getElementById(radioList);
   var listItems = radioButtonlist.getElementsByTagName("input");
   for (var i = 0; i < listItems.length; i++) {
       if (listItems[i].checked) {
          alert("Selected value: " + listItems[i].value);
       }
   }
}
person lunarquaker    schedule 12.02.2014
comment
И как я могу проверить selectedValue (или SelectedIndex)? В моем случае мне нужно это значение, чтобы отключить другие элементы управления на веб-странице. - person Ciupaz; 16.07.2020
comment
Пожалуйста, смотрите код выше. Это показано в вызовах функции оповещения в javascript. - person lunarquaker; 08.01.2021

Вы можете попробовать следующий код javascript.

  function GetListItem() {

            var radioButtonlist = document.getElementsByName("<%=RadioButtonList1.ClientID%>");
            for (var x = 0; x < radioButtonlist.length; x++) {
                if (radioButtonlist[x].checked) {
                    alert("Selected item Value "  + radioButtonlist[x].value);
                }
            }
person sharmila    schedule 20.02.2012
comment
Разве RadioButton1.ClientID не вернет идентификатор, а не имя? - person Nachshon Schwartz; 29.01.2013

Я пытаюсь найти выбранный элемент списка из RadioButtonList внутри пользовательского элемента управления, и код Шармилы не работает. Вместо RadioButtonList1.ClientID мне пришлось использовать .UniqueID

function getListItem() {
    var rbs = document.getElementsByName('<%= RadioButtonList1.UniqueID %>');
    for(var i = 0; i < rbs.length; i++){
        if(rbs[i].checked){
            return rbs[i].value;
        }
    }
    return null;
}
person gillonba    schedule 01.05.2013

Если вы поместите <asp:RadioButtonList> на главную страницу, компилятор HTML автоматически добавит «ctl00$» к имени вашего переключателя и сгенерирует идентификаторы для каждого элемента вашего списка.

Итак, вам лучше использовать document.getElementByName("ctl00$test");, чтобы найти переключатель в javascript.

или вы можете найти лучшее объяснение из здесь.

person user3745869    schedule 10.02.2015