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>