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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值