<table><tr><td>家属姓名</td><td><input type='text' name='inputName' /></td><td>证件号码</td><td><input type='text' name='inputSum' /></td><td>性别</td><td><input id='Radio1' type='radio' name='familySex" + j + "' value='男'/>男</td><td><input id='Radio2' type='radio' name='familySex" + j + "' value='女'/>女</td></tr></table>在.NET程序中我点击按钮显示一个div 并往这个div中写入不确定个数的table,我怎么才能得到多个table中的 单选 radio选择的值;请注意上面的 id和 name都是在变化的。跪求高手指点;最好用jQuery 解决,别的方法只要有用也行
比如: jQuery的代码如下:
$(":radio").each(function(){...});//获取所有的radiobox
$(":radio:checked").each(function(){...});//获取所有选中的radiobox
jQuery的代码如下:
$("input:radio").each(function(){...});//获取所有的radiobox
$("input:radio:checked").each(function(){...});//获取所有选中的radiobox
//获取DIV下面所有的INPUT对象
var radioArray = document.getElementById('你的DIV编号').getElementsByTagName('input');
for(int i=0;i<radioArray.length;i++){
//筛选出radio对象
if(radioArray[i].type=='radio'){
alert(radioArray[i]);
}
}
</script>
JQ会更加简洁,直接获取DIV下面的radio对象就好了
如果我有不止这一个文本框中的单选按钮呐,这个div外面还有单选按钮,我用
$('input[@type="radio"][checked]').val(); 这个方法得到的值为什么是得到的控件ID 而不是控件的值
控件的id是唯一的,你可以动态地生成不重复的id;
name是应该固定的,同一组radio就靠name来标识的你的一个table就是一条“家属信息”吧,光取到选中radio的值还不够,还要跟这个table关联起来是吧?是靠name='familySex" + j + "'这个j标识的吗?
那么你循环取值之后还要判断这j是不是你想要的是因为你的内容循环输出的吗?有很多相同的radio组比如这样
<!--这个id应该是根据数据库中的一条记录的主键生成的-->
<table id="table5788" class="myClass">
<tr>
<td>
<input type='radio' name='familySex' value='男' checked='checked' />男
<input type='radio' name='familySex' value='女' />女
</td>
</tr>
</table><table id="table8787" class="myClass">
<tr>
<td>
<input type='radio' name='familySex' value='男' checked='checked' />男
<input type='radio' name='familySex' value='女' />女
</td>
</tr>
</table>
...<script type="text/javascript">
//比如你想取某一条的“性别”选中情况
$("#table5788 input[name=familySex]:checked").val();
//或者循环所有的table,这里以class作为选择器
$("table.myClass").each(function(i,n){
$(n).find("input[name=familySex]:checked").val();
}) //另外说一句,你应该尝试下以div布局
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
function checks()
{
$("input:radio:checked").each(function() { alert(this.value); });
}
</script>
</head>
<body>
<input type="radio" name="testradio" value="jquery获取radio的值"/>jquery获取radio的值<br />
<input type="radio" name="testradio1" value="jquery获取checkbox的值" />jquery获取checkbox的值<br />
<input type="radio" name="testradio2" value="jquery获取select的值" />jquery获取select的值<br />
<button id="go2" onclick="checks()">遍历所有选中radio的值</button>
</body>
</html>
//如上代码会弹出选中的radio的值
不知道你的table 以及input表单是咋样生成的。
下面我描述2中情况
1、在参会人员信息里面选择携带家属 是否有几个家属的标识 然后根据这个数量自动生成table 以及 input表单,以及id是根据name+i来生成,如果是这样生成的话 你完全可以遍历for(int j=0;j<i;j++)然后根据id直接获取表单的值 存入容器(数组 或json类型字符串) 然后点保存的时候依次保存到2表。
2、在参会人员信息里面选择携带家属 但是没有几个家属的标识 只出现一个table 但是界面会有再次添加家属的按钮,这样的话 你依然可以定义一个全局变量i 当点击再次添加家属的时候,根据i++像第一种情况那样(规则)生成table 以及input表单,然后取值如上。
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<head id="Head1" runat="server">
<title>无标题页</title>
<meta http-equiv="Content-Type" content="text/html;" charset="UTF-8" />
<asp:Literal ID="LiteralCssFile" runat="server"></asp:Literal> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script type="text/javascript">
function xianshi() {
if ($("#radbutFamily5").attr("checked")) {
$("#familydiv").css("display", "block");
$("#radbutFamily6").removeAttr("checked");
$("#radbutFamily5").attr("checked", "checked");
}
else if ($("#radbutFamily6").attr("checked")) {
$("#familydiv").css("display", "none");
$("#radbutFamily5").removeAttr("checked");
$("#radbutFamily6").attr("checked", "checked");
}
}
</script> <script type="text/javascript">
var j = 1;
function AddInputArea() {
var div = document.createElement("<div>");
div.innerHTML = "<table id='tablfam'><tr><td>家属姓名</td><td><input type='text' name='inputName' /></td><td>证件号码</td><td><input type='text' name='inputSum' /></td><td>性别</td><td><input type='radio' name='familySex" + j + "' value='男'/>男</td><td><input type='radio' name='familySex" + j + "' value='女'/>女</td></tr></table>";
document.getElementById("familydiv").appendChild(div);
j++; } function GetAddInput() {
var names = document.getElementsByName("inputName");
genders = document.getElementsByName("inputSum");
familysexs = $("input:radio:checked").each(function() { alert(this.value); });
for (var i = 0; i < names.length; i++) {
document.getElementById("names").value += names[i].value + ",";
document.getElementById("sums").value += genders[i].value + ",";
document.getElementById("sexs").value += familysexs[i]+ ",";
}
}
</script></head>
<form id="form1" runat="server">
<asp:scriptmanager id="ScriptManager1" runat="server" enablescriptglobalization="true"
enablescriptlocalization="true">
</asp:scriptmanager>
<asp:updatepanel id="UpdatePanel1" runat="server">
<ContentTemplate>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="70%">
<asp:Label ID="lblMessage" runat="server" Text="" CssClass="success"></asp:Label>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="1" cellpadding="0" class="tabForm">
<tr>
<td align="center" colspan="2" >
<h1 style="font-size: 25px">报名 </h1> </td>
<tr>
<td class="dataLabel" width="12%">
姓名:
</td>
<td width="28%">
<asp:TextBox ID="txtInfoName" runat="server" MaxLength="50" TabIndex="0"
Width="150"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtInfoName" ErrorMessage="不能为空"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="dataLabel" width="12%">
性别:
</td>
<td width="28%">
<asp:RadioButton runat="server" ID="radbutSex1" Font-Size="Medium" Text="男"
GroupName="group1" > </asp:RadioButton>
<asp:RadioButton runat="server" ID="radbutSex2" Font-Size="Medium" Text="女" GroupName="group1"> </asp:RadioButton>
</td>
</tr>
<tr>
<td class="dataLabel" width="12%" >
是否携带家属:
</td>
<td width="28%">
<asp:RadioButton runat="server" ID="radbutFamily5" Font-Size="Medium" Text="是" GroupName="group3" onclick="xianshi()"> </asp:RadioButton>
<asp:RadioButton runat="server" ID="radbutFamily6" Font-Size="Medium" Text="否" GroupName="group3" onclick="xianshi()"> </asp:RadioButton>
<div id="familydiv" style="display:none">
<asp:HiddenField ID="names" runat="server" />
<asp:HiddenField ID="sums" runat="server" />
<asp:HiddenField ID="sexs" runat="server" />
<input type="button" value="增加" Height="29px" Width="49px" onclick="AddInputArea()" />
</div>
</td>
</tr> </tr>
</table>
<table width="100%" border="0" cellspacing="1" cellpadding="0" class="tabForm">
<tr >
<td width="50%" align="right">
<asp:Button ID="btnAdd" runat="server" Text="提交" CssClass="button" OnClientClick="return GetAddInput()" OnClick="btnAdd_Click" />
</td>
<td width="50%" align="left">
<asp:Button ID="btnClear" runat="server" Text="清空" CssClass="button" OnClick="btnClear_Click" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:updatepanel>
</form>奉上我描述的源码,请高手指导!谢谢!
var j = 1; //定义j 标识radio按钮中的name属性,避免name相同的时候选择男女变化
function AddInputArea() {
var div = document.createElement("<div>");
div.innerHTML = "<table class='tablefamily'><tr><td>家属姓名</td><td><input type='text' name='inputName' /></td><td>证件号码</td><td><input type='text' name='inputSum' /></td><td>性别</td><td><input type='radio' name='familySex" + j + "' value='男'/>男</td><td><input type='radio' name='familySex" + j + "' value='女'/>女</td></tr></table>";
document.getElementById("familydiv").appendChild(div);
j++;
}
function GetAddInput() {
var names = document.getElementsByName("inputName");
genders = document.getElementsByName("inputSum");
// 查找class为tablefamily中input为radio的选择的(checked)值
familysexs = $(".tablefamily input:radio:checked").each(function() { this.value });
for (var i = 0; i < names.length; i++) {
document.getElementById("names").value += names[i].value + ",";
document.getElementById("sums").value += genders[i].value + ",";
document.getElementById("sexs").value += familysexs[i].value + ",";
}
}
</script>已经解决了,谢谢各位大神指点