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

您的代码中存在多个问题。

HTML文档中的 ID只能使用。您曾两次使用#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();
    }
});

Working Demo

解释：attribute selector将与input为name的{{1}}匹配，:checked选择器仅选择被检查的。然后使用length我们可以看到匹配了多少元素。如果为零，则表示该用户未选择任何选项。

Answer 2

据我所知，您正在尝试确保用户选择性别。

当前的问题是两个<input type="radio">具有相同的ID。虽然给它们提供相同的名称是正确的，但永远不会给两个元素提供相同的ID 。

此外，您只需检查是否已选中任何单选按钮。这就是我写上面代码的方法：

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

jQuery event.preventDefault混淆

2 个答案: