jQuery event.preventDefault混淆

Question

我正在使用jQuery.

点击搜索按钮用于检查radiobutton是否未选中它将显示alert("enter the field")否则执行任务...我也使用了event.preventDefault();

实际上我在使用radiobutton,其中我使用了包含两个选项男性和女性的性别标签.现在问题是当我检查男性单选按钮或女性.它仍然显示进入该领域.我认为这一部分肯定有问题if($('#gender').is(":not(:checked)"))

这是我的代码:

$('#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

您的代码中有几个问题.

• 一个ID只能使用一次一个HTML文档英寸 你用了#gender两次.
• 您不需要使用另一个标志变量,您可以if简单地运行.
• 在你的第二个if你没有使用{}括号,因此preventDefault总是执行.

我建议你这样做:

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

和jQuery:

$('#searchbutton').click(function(event){
    if ($('input[name="gender"]:checked').length < 1) {
       alert("Select the field first");
       event.preventDefault();
    }
});

工作演示

说明:属性选择器将匹配input其name为s的s gender,并且:checked选择器仅选择已检查的s .然后使用length我们可以看到有多少元素匹配.如果为零,则表示使用未选择任何选项.