出处:
做一个类似【试卷答题】的小项目,存在单选题、多选题。
使用label标签,只能达到点击文字 选中答案,如何做到如下图所示。
核心代码:
1.html代码
<style>
input{
float:right;
}
</style>
<c:forEach items="${qlist }" var="question" varStatus="status">
<c:if test="${question.type == 1 }">
<div qid='${question.id }' qtype='1' class='divcold'>
<div>${status.index+1 }、${question.title }</div>
<c:forEach items='${question.daan }' var='daan'>
<!-- 如下三行是本问题 核心代码,将答案 和 input标签放入一个div中,
给div绑定点击事件 -->
<div class="divdan">
<span>${daan.content }</span>
<input type='radio' name='danxuan${status.index+1 }'/>
</div>
</c:forEach>
</div>
</c:if>
<c:if test="${question.type == 2 }">
<div qid='${question.id }' qtype='2' class='divcold'>
<div>${status.index+1 }、${question.title }</div>
<c:forEach items='${question.daan }' var='daan'>
<div class="divduo">
<span>${daan.content }</span>
<input type='checkbox'/>
</div>
</c:forEach>
</div>
</c:if>
</c:forEach>
2.js代码
<script>
$(function(){
$(".divdan").click(function(){
if($(this).find("input").attr("checked")==undefined){
var danname = $(this).find("input").attr("name");
$.each($("input[name='"+danname+"']"),function(i,val){
$(val).attr("checked",false);
});
$(this).find("input").attr("checked",true);
$(this).find("input").click();
}
});
$(":checkbox").click(function(e){
//停止事件冒泡,当点击的是checkbox时,就不执行父div的click
e.stopPropagation();
});
$(".divduo").click(function(){
if($(this).find("input").attr("checked")==undefined){
$(this).find("input").click();//如果没该行,存在点击第二轮,不起作用。
$(this).find("input").attr("checked",true);
}else{
$(this).find("input").attr("checked",false);
}
});
});
</script>