最近在写一个从Excle题库抽题组卷在jsp显示的功能,其中用到了一些算法和技术,在此做记录。
本篇主要来介绍获取jsp界面中单选框的选择结果。
js代码:
<script type="text/javascript">
function CheckProduct() {
//获取单选框的选中状态
product = document.getElementsByTagName('input');
checkProduct = [];
var num=0;
for(k in product){
if (product[k].checked){
checkProduct.push(product[k].value);
num++;
}
}
//在此例中共5个input单选,在此判断是否都选过了
if(num<5){
alert("请填写完整");
}else{
//检查结果是否一致
alert("你的答案是"+checkProduct);
//提交
var isDel = confirm("确认提交吗?");
if (isDel){
//将checkProduct数组当做参数传递到servlet
window.location.href = "<%=basePath %>show/judgeAnswer?checkProduct="+checkProduct;
}//if
}//else
}//function
</script>
html代码:
<div style="text-align: left">
<!--该用例中questionList包含5个元素,因此会循环5次,对应上述js中num=5-->
<!--注意,要想实现多个题目,都使用了input单选框,需要在name中区分。本例中每次循环都会得到不同的question.number,因此name将会有所区分-->
<c:forEach items="${questionList}" var="question" >
<ul >
<li><label><input type="radio" name="answer_${question.number }" value="A">A.${question.answerA }</label></li>
<li><label><input type="radio" name="answer_${question.number }" value="B">B.${question.answerB }</label></li>
<li><label><input type="radio" name="answer_${question.number }" value="C">C.${question.answerC }</label></li>
<li><label><input type="radio" name="answer_${question.number }" value="D">D.${question.answerD }</label></li>
</ul>
</c:forEach>
<!--在button中添加点击事件-->
<div style="text-align: center"><button id="tijiao" type="button" οnclick="CheckProduct()" style="text-align: center" >交卷</button>
</div>
</div>