How to Find selected item from radiobutton list us

问题:

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

回答1:

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

回答2:

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

回答3:

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

回答4:

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.