当单选按钮的标签可点击时双击

Question

我正在写一份 JavaScript 到运行的问卷。我遍历问题列表，显示问题和一组单选按钮（Yes/No 个答案）。对于每个新问题，我都会显示单选按钮集，单击它们时收集答案，隐藏它们，取消选中它们并再次显示它们。

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

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

label:hover {
background:#ccc;   
}

或者通过使用 JQuery UI 按钮集，我相信这在本质上是相似的。

问题是：当我尝试这两种方法中的任何一种时，每次点击其中一个收音机似乎相当于两次点击并导致各种问题：仅显示第二个问题而单选按钮不显示从一个问题到另一个问题得到清除。

我没有在此处包括完整的 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

当单选按钮的标签可点击时双击

Double-clicks when label of radio button is clickable

javascript

label

radio-button