Double-clicks when label of radio button is clickable

Question

I am writing a JavaScript to run a questionnaire. I iterate through a list of questions, displaying the question and a set of radio buttons (for Yes/No answers). For each new question, I display the radio button set, collect the answer when they are clicked, hide them, uncheck them and display them again.

This all works perfectly when I stick to simple HTML radio buttons. However, for ease of clicking, I tried to make the labels clickable too, either by adding this code in the css (from this post):

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

label:hover {
background:#ccc;   
}

Or by using the JQuery UI buttonset, which does -I believe- something essentially similar.

The problem is: when I try either of these appraches, each click on one of the radios seems to amount to two clicks and leads to all sorts of problems: only every second question is displayed and radio buttons don't get cleared from question to question.

I don't include the full JavaScript here because it's rather long and it does work fine with plain HTML.

Does anybody know why this is the case, or how to prevent it?

Edit: here's a snippet of code, I hope it contains all the essentials.

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

without seeing your code, no one can help you. please add your code in question — Apul Gupta, Mar 09 '15 at 11:36
Not sure I understand all of it but, just a guess, have you tried to make the parent div clickable (the one that contains both the label and the radio) ? and the parent div only. — jseiller, Mar 09 '15 at 11:37
I haven't tried, but how would that work (might not be getting something here, I'm no expert): I don't have a div for each single radio button. I just have one parent div for both buttons. If I make it clickable, I won't be able to distinguish which of the options was selected. — elisa, Mar 09 '15 at 13:02
First I would put the event handler on `` and not on the entire div and then use this to catch the value of the targeted input. I would use `event.preventDefault()` and check if the value you catch is != undefined, null or w/e — jseiller, Mar 09 '15 at 13:12
This worked perfectly. Thanks a lot! Can I copy your comment as an answer? — elisa, Mar 09 '15 at 16:51

score 1 · Accepted Answer · answered Mar 09 '15 at 16:53

As suggested by @jseiller, I did this:

First I would put the event handler on and not on the entire div and then use this to catch the value of the targeted input. I would use event.preventDefault() and check if the value you catch is != undefined, null or w/e

Double-clicks when label of radio button is clickable

1 Answers1