asp.net - 如何使用javascript从单选按钮列表中查找所选项目

Question

我需要使用 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;
}

我如何从该列表中找到 selectedItem

Answer 1

这是实现此目的的一种相当简单的方法。如果您想在用户单击时查找选定的列表项，请使用在单击列表项时调用的 javascript 函数为 RadioButtonList 中的每个项添加一个 onclick 属性。 “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>

请注意，ASP.NET 智能感知无法识别 ListItem 控件的“onclick”属性，但它仍会触发客户端 javascript 函数。

现在在您的 javascript 函数中:

function myListItemClick(e) {
    alert('Selected value: ' + e.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);
       }
   }
}