Radio buttons cannot be selected

Question

I'm having a problem with some radio buttons. Below is the code for the match selection for my game. I implemented error detection ( if (matchType == null) ) however it give me a problem that I can't figure out. When I trigger the error (don't select any radio buttons) the text shows correctly, however, I cannot select any of the radios afterwards. It's like it locks up. I know it has to do with something in the onclick event because I can select them just fine before I trigger the error. I would appreciate any help.

PS: I don't know if this will help but I used the jQuery library for radio buttons.

    <div id="tabs-1">
    <fieldset>
    <legend>Select a Game type: </legend>
    <legend><b>Normal</b></legend>
    <label for="radio-1">Training</label>
    <input type="radio" class="radioButtons" value="training" name="radios" id="radio-1">
    <label for="radio-2">1v1</label>
    <input type="radio" class="radioButtons" value="one" name="radios" id="radio-2">
    <label for="radio-3">2v2</label>
    <input type="radio" class="radioButtons" value="two" name="radios" id="radio-3">
    <label for="radio-4">3v3</label>
    <input type="radio" class="radioButtons" value="three" name="radios" id="radio-4"><br/>
</fieldset>
</div>

    lobbyDivfindMatch.onclick = function()
{
    if (window.innerWidth >= 1100 && window.innerHeight >= 800)
    {
        var matchType = null;
        //console.log("WIDTH " + window.innerWidth);

        for (var i = 0; i < radios.length; i++)
        {
            if (radios[i].checked)
            {
                matchType = radios[i].value;
                //alert(radios[i].value);
                break;
            }
        }
        if (matchType != null)
        {
            $("#loader").css("display", "inline-block");
            socket.emit('matchMake', {matchType:matchType});
        }
        else if (matchType == null) //Error Detection
        {
            lobbyDiv.innerHTML += "<p>Please select a match type!</p>";
        }
    }
    else
    {
        alert("I'm sorry but you need a screen size of atleast 1100x930 pixels to play!");
    }
}

Answer 1

I figured it out!
I just had to add checked="checked" to the first radio button.
The problem was that all the radio buttons start out unchecked so when I click the button it prevented default. This way the error will never be triggered unless the html is edited in inspect element so I will leave the error checking in.