Question

I am having some problem with my if else statment for my radiobutton form. You can view it live here: http://jsfiddle.net/UDGGS/20/

Jquery:

$(document).ready(function() {

    $("input").click(function() {
        $check = true;
    });

    $("#next1").click(function() {
        if ($check) {
            $("boks1").hide();
            $("boks2").show();
        } else {
            alert('Pick one');
        }
    });

});

HTML:

<div id="boks1">
<h1>What would you like to answer? </h1>
<input type="radio" name="group1" value="0">Answer 1<br>
<input type="radio" name="group1" value="1">Answer 2<br>
<input type="radio" name="group1" value="2">Answer 3<br>
<div id="next1" style="border:1px solid black;">Next question<div>
</div>
<div id="boks2">
<h1>What would you like NOT to answer? </h1>
<input type="radio" name="group2" value="0">Answer 1<br>
<input type="radio" name="group2" value="1">Answer 2<br>
<input type="radio" name="group2" value="2">Answer 3<br>
<div id="next2">Next question 3<div>
</div>

CSS:

#boks2 {display:none;}
#next1 {display:block;}

Why is there not alert raised when I click on next and no radiobuttons have been selected? And why I am not shown the next question when I have selected one and clicked on the next div.

Answer 1

The problem is simply that you are missing the # from your id selectors:

$("#boks1").hide();
$("#boks2").show();

However, you should declare the $check variable in the parent scope of the two functions (so inside the ready event handler):

$(document).ready(function() {
    var $check = false;
});

Otherwise, if you click on the “next” button before selecting a radio button, $check will not be defined. And when it does become defined, it’s in the global scope, which is not a good thing.