关于循环显示的复选框选择个数的限制

做了一个投票系统,遇到的问题,解决后分享给大家

//控制显示提示,限制选择个数
		function checkBox(id)
		{
			var name = document.getElementsByTagName("input");
			var jsZZ = /^sCheck_*/;
			var cheNum = 0;
			for(var i=0;i<name.length;i++)
			{
				if(name[i].type == "checkbox" && name[i].name.match(jsZZ))
				{
					if(name[i].name == name[i-1].name || name[i].name == name[i+1].name)
					{
						var choMaxId = "font_"+name[i].name.substr(7,38);
						var spanId = "span_"+name[i].name.substr(7,38);
						var choMax = document.getElementById(choMaxId).value;
						if(name[i].checked)
						{
							cheNum += 1;
						}
						if(choMax > 0 && cheNum != 0)
						{
							if(choMax < cheNum)
							{
								document.getElementById(spanId).style.color = "red";
								document.getElementById(id).checked = false;
							}
							if(choMax >= cheNum)
							{
								document.getElementById(spanId).style.color = "gray";
							}
						}
						if(choMax <0)
						{
							if(Math.abs(choMax) == cheNum)
							{
								document.getElementById(spanId).style.color = "gray";
							}
							if((Math.abs(choMax) < cheNum || Math.abs(choMax) > cheNum) && cheNum != 0)
							{
								document.getElementById(spanId).style.color = "red";
								if(Math.abs(choMax) < cheNum)
								{
									document.getElementById(id).checked = false;
								}
							}
						}
					}
					if(name[i].name != name[i+1].name)
					{
						cheNum = 0;
					}
				}
			}
		}
		//控制是否允许提交
		function ref()
		{
			var name = document.getElementsByTagName("input");
			var jsZZ = /^sCheck_*/;
			var cheNum = 0;
			for(var i=0;i<name.length;i++)
			{
				if(name[i].name.match(jsZZ))
				{
					if(name[i].name == name[i-1].name || name[i].name == name[i+1].name)
					{
						if(name[i].checked)
						{
							cheNum += 1;
						}
					}
					var choMaxId = "font_"+name[i].name.substr(7,38);
					var spanId = "span_"+name[i].name.substr(7,38);
					var choMax = document.getElementById(choMaxId).value;
					if(cheNum == 0)
					{
						document.getElementById(spanId).style.color = "red";
						document.getElementById("button").type = "button";
					}
					if(cheNum != 0)
					{
						document.getElementById(spanId).style.color = "gray";
						document.getElementById("button").type = "submit";
						if(choMax < 0)
						{
							if(Math.abs(choMax) != cheNum)
							{
								document.getElementById(spanId).style.color = "red";
								document.getElementById("button").type = "button";
							}
							if(Math.abs(choMax) == cheNum)
							{
								document.getElementById(spanId).style.color = "gray";
								document.getElementById("button").type = "submit";
							}
							if(cheNum == 0)
							{
								document.getElementById(spanId).style.color = "red";
								document.getElementById("button").type = "button";
							}
						}
						if(choMax > 0)
						{
							if(choMax < cheNum)
							{
								document.getElementById(spanId).style.color = "red";
								document.getElementById("button").type = "button";
							}
							if(choMax >= cheNum)
							{
								document.getElementById(spanId).style.color = "gray";
								document.getElementById("button").type = "submit";
							}
						}
					}
					if(name[i].name != name[i+1].name)
					{
						if(cheNum == 0)
						{
							document.getElementById("button").type = "button";
							break;
						}
						if(cheNum != 0)
						{
							cheNum = 0;
						}
					}
				}
			}
		}
		//控制单选列提示信息的颜色
		function checRadio(name)
		{
			var spanId = "span_"+name.substr(7,38);
			document.getElementById(spanId).style.color = "gray";
		}

html部分-由于是从项目中摘出来的难免格式上有问题,请自行判断修正

<c:forEach items="${vo.list}" var="wt">
		<h2>
			<c:if test="${wt.choiceMax > 0}">
				<span id="span_${wt.qId }" style="color:gray;font-size: 12">错误提示信息</span>
			</c:if>
		</h2>
	<!-- 该循环中不可加入input标签,否则影响该处的js校验 -->
		<c:forEach items="${wt.list}" var="op"> 
			<table border="0" cellpadding="7" cellspacing="0" width="100%">
			    <tbody>
			    <tr>
			    	<td class="nvt-col-index">${op.sort }</td>
			        <td class="nvt-col-input">
			        	<c:if test="${wt.choiceMax == 1 }">
			        		<input name="sCheck_${wt.qId }" id="${op.tmId }" value="${op.tmId }" type="radio"  οnclick="checRadio(name);"/>
			        	</c:if>
			        	<c:if test="${wt.choiceMax != 1 }">
			        		<input name="sCheck_${wt.qId }" id="${op.tmId }" value="${op.tmId }" type="checkbox" οnclick="checkBox(id);"/>
			        	</c:if>
			        </td>
			    </tr>
				</tbody>
			</table>
	</c:forEach>
</c:forEach>
<button id="button" type="button" οnclick="ref()">投票</button>


 


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值