JavaScript获取RadioButtonList选中值的两种实现方式
作者:拾光时间:2026-10-30 12:53:26浏览:85
本文介绍了在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选中值的两种推荐方法,供读者参考。
作者最新文章
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
