jQuery event.preventDefault confusion - html

Question

I'm using jQuery.
On click the search button is used the flag to check if radiobutton is unchecked it will show alert("enter the field") otherwise do the task... and also I used event.preventDefault();
Here actually I'm using radiobutton in which I used gender label that contains two option male and female. Now the problem is when I checked male radio button or female. Still it's showing enter the field. I think there must be something wrong in this part if($('#gender').is(":not(:checked)"))
here is my code:
$('#searchbutton').click(function(event){
alert("ZZ");
var flag3=0;
if ($('#gender').is(":not(:checked)"))
{
flag3=1;
}
if( flag3==1)
alert("Select the field first");
event.preventDefault();
});
<input type="radio" name="gender" id="gender" value="male" /> Male<br />
<input type="radio" name="gender" id="gender" value="female" /> Female
<input type="submit" name="searchbutton" value="Search" id="searchbutton">

Answer 1

You have several problems in your code.
An ID can only be used once in a HTML document. You used #gender twice.
You don't need to use another flag variable, you can run the if simply.
In your second if you have not used {} brackets, thus preventDefault is always executing.
I suggest you do something like this:
<input type="radio" name="gender" value="male" /> Male<br />
<input type="radio" name="gender" value="female" /> Female
<input type="submit" name="searchbutton" value="Search" id="searchbutton">
and the jQuery:
$('#searchbutton').click(function(event){
if ($('input[name="gender"]:checked').length < 1) {
alert("Select the field first");
event.preventDefault();
}
});
Working Demo
Explanation: The attribute selector will match inputs whose name is gender, and the :checked selector only selects the ones that are checked. Then using length we can see how many elements were matched. If zero, that means that the use has not selected any of the options.

Answer 2

From what I understand, you are trying to make sure the user makes a selection on gender.
The immediate problem is that both <input type="radio">s have the same id. While it is proper to give them the same name, you never give two elements the same id.
Additionally, you should simply be checking if any of the radio buttons are checked. This is how I would write the above code:
$('#searchbutton').click(function (e) {
if ($(':radio:checked[name="gender"]').length == 0) {
alert("Select the field first");
e.preventDefault();
}
});