Jquery Radio Button Unchecked Error

I'm trying a form validation using jQuery, I found some error which I can't understand. I'm having two radio buttons

Solution 1:

First, as j08691 mentioned in a comment, no two HTML elements can have the same id attribute. Second, checked functions as a property, not an attribute. Use $("#gender").prop("checked") instead; this will return true or false.

Solution 2:

You could use this:

if(!$('[name="gender"]:checked').size())
     alert('Please select your gender');

JsFiddle

Solution 3:

JavaScript's ID detection simply matches the first instance of an ID and doesn't bother to continue searching as the id attribute is intended to be unique.

To fix your issue, firstly remove those duplicated ID attributes and change your jQuery selector from:

$('#gender')

To:

$('[name="gender"]')

You can then combine this with jQuery's :checked selector as well to determine whether one of the radio elements is checked:

if ( $('[name="gender"]:checked').length === 1 ) {
    alert('Please select your gender');
    returnfalse;
}

Solution 4:

try this

var isChecked = $('[name="gender"]:checked').length;

if(isChecked < 1) {
    alert("please Select your gender");
} 

JSFiddile

Share