jQuery event.preventDefault 混淆答案

【问题标题】：jQuery event.preventDefault confusionjQuery event.preventDefault 混淆
【发布时间】：2011-08-08 12:38:13
【问题描述】：

我正在使用 jQuery。

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

实际上我在这里使用了单选按钮，其中我使用了包含两个选项男性和女性的性别标签。现在问题是当我检查男性单选按钮或女性时。仍然显示进入该字段。我觉得这部分肯定有问题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">

【问题讨论】：

标签： html forms jquery-selectors jquery

【解决方案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();
    }
});

Working Demo

解释：attribute selector 将匹配name 为gender 的inputs，而:checked 选择器只选择被选中的那些。然后使用length 我们可以看到匹配了多少元素。如果为零，则表示用户没有选择任何选项。

【讨论】：

【解决方案2】：

据我了解，您正试图确保用户选择性别。

直接的问题是两个<input type="radio">s 具有相同的ID。虽然给它们赋予相同的名称是正确的，但您永远不要赋予两个元素相同的 id。

此外，您应该简单地检查是否选中了任何单选按钮。这就是我将如何编写上面的代码：

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

【讨论】：