做了一个投票系统,遇到的问题,解决后分享给大家
//控制显示提示,限制选择个数
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>