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

发布于 2025-01-07 05:48:02 字数 736 浏览 0 评论 0原文

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

I need to find selected item from radiobutton list using javascript...
Here is my code

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

<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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

弃爱 2025-01-14 05:48:03

这是实现此目的的相当简单的方法。如果要在用户单击时查找选定的列表项,请为 RadioButtonList 中的每个项目添加 onclick 属性,并在单击列表项时调用 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>

请注意,ListItem 控件的 ASP.NET 智能感知无法识别“onclick”属性,但它仍会触发客户端 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);
       }
   }
}

Here's a fairly straightforward way of accomplishing this. If you want to find the selected list item when the user clicks, add an onclick attribute to each of the items in the RadioButtonList with the javascript function to call when the list item is clicked. The "this" parameter will pass the list item to the javascript function:

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

Note that the 'onclick' attribute is not recognized by ASP.NET intellisense for ListItem controls, but it will still fire the client-side javascript function.

Now in your javascript function:

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

Make sure to add the "Value" attribute to all of your list items for this to work properly (as you have already done).

If you don't want to do this when the user clicks, you can accomplish it this way. In your markup:

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

Then in your 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);
       }
   }
}
谁对谁错谁最难过 2025-01-14 05:48:03

您可以尝试使用以下 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);
                }
            }

You can try with the following javascript code.

  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);
                }
            }
歌入人心 2025-01-14 05:48:03

我试图从用户控件内的 RadioButtonList 中查找选定的列表项,但 sharmila 的代码不起作用。我必须使用 .UniqueID 而不是 RadioButtonList1.ClientID

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

I am trying to find the selected list item from a RadioButtonList inside a user control and sharmila's code did not work. Instead of RadioButtonList1.ClientID I had to use .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;
}
他不在意 2025-01-14 05:48:03

如果您将 放入母版页中,HTML 编译器会自动将“ctl00$”添加到您的单选按钮名称中,并为每个列表项生成 ID。

因此,您最好使用 document.getElementByName("ctl00$test"); 来查找 JavaScript 中的单选按钮。

或者您可以从此处找到更好的解释。

If you put the <asp:RadioButtonList> in a master page, the HTML compiler will automatically add "ctl00$" to your radio button name, and will generate IDs for each of your list item.

So, you'd better use document.getElementByName("ctl00$test"); to find the radio button in javascript.

or you can find out a better explanation from here.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文