radio、checkbox单击行，自动选中

出处：

做一个类似【试卷答题】的小项目，存在单选题、多选题。

使用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>