JavaScript获取RadioButtonList选中值的两种实现方式

作者:拾光

时间:2026-10-30

浏览:84

本文介绍了在ASP.NET WebForm环境下,使用JavaScript获取RadioButtonList控件选中值的两种常用方法。第一种通过遍历Input元素并检查checked属性获取值;第二种利用RadioButtonList渲染为Table的特性,通过getElementsByTagName获取子Radio并循环判断,同时提取对应的Text值。

文章目录

JavaScript获取RadioButtonList选中值方法详解

具体实现代码如下:


<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="ajaxselect.OnmouseTitle.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
  <HEAD>
    <title>WebForm1</title>
    <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
    <meta content="C#" name="CODE_LANGUAGE">
    <meta content="JavaScript" name="vs_defaultClientScript">
    <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
    <script language="javascript">

     function getvalue()
    {
    var b=document.all.rbtid.length
    var a=document.getElementById("rbtid").cells.length; 
    //alert(b);结果为5
    //alert(a);结果为4
    //for(var i=0;i<b-1;i++)这样也行
    for(var i=0;i<a;i++)
    {
     var ss="rbtid_"+i;
     var aa=document.getElementById(ss).value;
     //if(eval('document.all.rbtid_'+i).checked==true) //这样也行 eval()函数能将数据符串转成js运行
     var bb=document.getElementById(ss);
     if(document.getElementById(ss).checked) //注意checked不能写成Checked,要不然不成功
      {
         alert(aa);
         break;
      }   
    
    }
    }

或者采用第二种方式:


//得到radiobuttonlist
   var vRbtid=document.getElementById("rbtid");
   //得到所有radio
   var vRbtidList= vRbtid.getElementsByTagName("INPUT");
   for(var i = 0;i<vRbtidList.length;i++)
   {
    if(vRbtidList[i].checked)
    {
      var text =vRbtid.cells[i].innerText;
      var value=vRbtidList[i].value;
      alert("选中项的text值为"+text+",value值为"+value);
    }
   }

在该方法中,RadioButtonList控件在客户端被渲染为表格(table)。通过调用getElementsByTagName("INPUT")方法获取其内部所有的Radio按钮元素,随后遍历每个Radio元素,并通过cells属性获取Radio对应的文本值(Text)。


</script>
  </HEAD>
  <body MS_POSITIONING="GridLayout">
    <form id="Form1" method="post" runat="server">
      <FONT face="宋体">
        <asp:radiobuttonlist id="rbtid" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 8px" runat="server"
          Width="216px" Height="176px" name="rbtid">
          <asp:ListItem Value="0">0</asp:ListItem>
          <asp:ListItem Value="1" Selected>1</asp:ListItem>
          <asp:ListItem Value="2">2</asp:ListItem>
          <asp:ListItem Value="3">3</asp:ListItem>
        </asp:radiobuttonlist><INPUT style="Z-INDEX: 102; LEFT: 184px; POSITION: absolute; TOP: 256px" onclick="getvalue()"
          type="button" value="Button"></FONT>
    </form>
  </body>
</HTML>

以上内容即为JavaScript获取RadioButtonList选中值的两种推荐方法,供读者参考。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章