只能选择一项的多选框
最终结果
1、在routeList.jsp页面上点击右下角“选择签证类型”
2、在弹出的ServiceVisaType.jsp页面上选择所需签证（同一个国家下的签证只可以选择一项）
3、点击保存后，把值返回到routeList.jsp页面上
实现方法：
routeList.jsp页面
function getServiceVisaType() {
var cityId = document.getElementById("cityId").value;
var url = '../zhike/ServiceVisaType.jsp?cityId=' + cityId;
//打开一个窗口
var guestFrom = window.showModalDialog(url, "", "dialogHeight:300px;dialogWidth:550px;center:yes;help:yes;resizable:yes;status:yes;");
if (guestFrom != null) {
var a = guestFrom.split("/");
document.getElementById("visaTypeName").value = a[0];
document.getElementById("visaTypeId").value = a[1];
}
}
ServiceVisaType.jsp页面
<%@ page contentType="text/html;charset=GBK" %>
<%@ taglib prefix="xweb" uri="xweb" %>
<%@ page import="com.zkhx.travel.front.visa.proxy.visaManager" %>
<%@ page import="com.zkhx.util.SmartUtil" %>
<%@ page import="com.zkhx.travel.common.proxy.CountryManage" %>
<%
//获取从页面上的cityId的值
String cityId = request.getParameter("cityId");
//荻得根路径
String root=request.getContextPath();
%>
<html><base target="_self">
<xweb:loadScripts/>
<xweb:noCache/>
<xweb:message/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<link href="<%=root%>/css/index.css" rel="stylesheet" type="text/css" />
<link href="<%=root%>/css/public.css" rel="stylesheet" type="text/css" />
<title>选择签证类型</title>
</head>
//定义两个变量，用来保存多选框的值和ID
var textVal;
var textId;
//a--城市的长度
//b--获取的每一次被选择的id
//c--用来标记同一个国家下有相同的name
function test(a, b,c) {
textVal = "";
textId = "";
//获取被点击的那个多选框
var id = document.getElementById(b);
if(eval(id.checked) == true){
//获取同一个城市下的几种签证，如一个国家可以有个人旅游签证、商务签证、探亲访友签证
var boxes = document.getElementsByName("ids"+c);
for (var i = 0; i < boxes.length; i++)
{
//让同一个国家下的几种签证设置为不可以选择状态
document.getElementById(boxes[i].id).checked = false;
//被点击的那个签证设置为选择状态
if(b == boxes[i].id){
document.getElementById(boxes[i].id).checked = true;
}
}
}
//把被选择的多选框的值和ID保存到textVal和textId中
for (var j = 0; j < a; j++) {
var boxes = document.getElementsByName("ids"+j);
for (var i = 0; i < boxes.length; i++)
{
if (boxes[i].checked)
{
textVal += boxes[i].nextSibling.nodeValue;
textId += boxes[i].value + ",";
}
}
}
//把值插入ID分别为language和language1的框中
document.form1.language.innerText = textVal;
document.form1.language1.innerText = textId;
}
//选择所需签证后，把值返回并关闭当前窗口
function returnguest(){
var b=document.getElementById("language").value;
var p=document.getElementById("language1").value;
window.returnValue = b.substring(0,b.length-1)+"/"+p.substring(0,p.length-1);
window.parent.close();
}
function fanhui(){
window.parent.close();
}
</script>
<body style="padding-left:5px; padding-right:5px;">
<form action="" name="form1">
<div style="font-size:14px; font-weight:bold; color:#003366; margin-top:8px; border-bottom:4px solid #9EB8D3; margin-bottom:6px;">请选签证类型</div>
<table width="100%" border="0" cellpadding="0" cellspacing="1" style=" line-height:24px;">
<%
//visaManager里面有签证增删改查的方法
visaManager vm=new visaManager();
//CountryManage里面有国家增删改查的方法
CountryManage cm = new CountryManage();
%>
<tr><td colspan="5" height="26" class="tab_contC lft">
<%
//cityId里面有多个城市的ID，以逗号隔开
String[] cityIds = cityId.split(",");
for(int i=0;i<cityIds.length;i++){
int j = 0;
%>
//xweb是一个框架
//<%=vm.visaTypeList(cityIds[i])%>通过城市ID查询该城市有几个签证，然后一一输出来
<xweb:iterate type="com.zkhx.travel.front.visa.model.VisaType" id="visa" collection="<%=vm.visaTypeList(cityIds[i])%>">
<%
j = j+1;
%>
<input onclick="test(<%=cityIds.length%>,<%=visa.getCountryId()%><%=j%>,<%=i%>)"
type="checkbox" name="ids<%=i%>" value="<%=visa.getVisaTypeId()%>"
id="<%=visa.getCountryId()%><%=j%>"/><%=cm.CountryList1(visa.getCountryId())%>(<%=visa.getVisaTypeName()%>)
</xweb:iterate><br />
<%
}
%>
</td>
<tr>
<td colspan="5" class="tab_contC lft">
//显示所选的签证类型
<textarea rows="5" cols="60" name="language" id="language" readonly></textarea>
<input type="hidden" name="language1" id="language1" size="50">
</td>
</tr>
</table>
//提交和返回
<div style="text-align:center; margin-top:6px;"><a onClick="returnguest();" style="CURSOR: hand"><img src="../images/save.gif" border="0" /></a> <a onClick="fanhui();" style="CURSOR: hand"><img src="../images/back.gif" border="0" /></a></div>
</form>
</body>
</html>
