Question

我正在编写一个JavaScript来运行调查问卷。我遍历一系列问题，显示问题和一组单选按钮（对于是/否答案）。对于每个新问题，我会显示单选按钮集，在单击时收集答案，隐藏它们，取消选中它们并再次显示它们。

当我坚持使用简单的HTML单选按钮时，这一切都很完美。但是，为了便于点击，我尝试通过在css中添加此代码来使标签也可以点击（来自此post）：

label {
background:#aaa;
color:#fff;
border-radius:8px;   
padding:1em;
margin:1em;
cursor:pointer;
}

label:hover {
background:#ccc;   
}

或者通过使用JQuery UI按钮组，我相信 - 这些按钮基本相似。

问题是：当我尝试其中任何一个appraches时，每次点击其中一个无线电似乎相当于两次点击并导致各种问题：只显示每一个问题，单选按钮不会显示从问题中解脱出来。

我没有在这里包含完整的JavaScript，因为它相当长，并且使用纯HTML可以正常工作。

有人知道为什么会这样，或者如何防止它？

编辑：这是一段代码，我希望它包含所有必需品。

<div id="questionAnswerRadio">
    <label for="radioYes">
        <input type="radio" id="radioYes" value="Yes" name="radio">
        <span>Yes</span>
    </label>
    <label for="radioNo">
        <input type="radio" id="radioNo" name="radio">
        <span>No</span>
    </label>
</div>


<script>
$("#questionAnswerRadio").click(function(event) {
    if (currentSlideState == slideState.ANSWER) {
        $(this).blur();
        endAnswerState();
    }
});



function endAnswerState() {
    currentSlideResult.answerChosen = $("#questionAnswerRadio :radio:checked + span").text();

    componentResult.slideResultList.push(currentSlideResult);
    currentSlideResult = {};
    slideCount++;

    resetSlide();
    displayNextSlide();
}


function resetSlide() {
    $("#component").children().hide();
    $('#questionAnswerRadio input').removeAttr('checked');
    $("#questionAnswerRadio").hide();
}

function displayNextSlide() {
    question = slideList[slideCount].question;
    $("#question").html(question).show();
    $("#questionAnswerRadio").show();
}





</script>

Answer 1

正如@jseiller所说，我这样做了：

首先，我将事件处理程序打开而不是整个div，然后使用它来捕获目标输入的值。我会使用event.preventDefault（）并检查你捕获的值是否为！= undefined，null或w / e

单击单选按钮标签时双击

1 个答案: