jQuery单选按钮未选中错误

Question

我正在尝试使用jQuery进行表单验证，我发现了一些我无法理解的错误。

我有两个单选按钮

<input type="radio" name="gender" value="Male" id = "gender"/>Male
<input type="radio" name="gender" value="Female" id = "gender"/>Female

并验证是否已检查

if(! $('#gender').attr('checked')){
                alert('Please select your gender');
                return false;
            }

问题是，当我检查第一个单选按钮并提交表单时，我没有收到警报，但是当我检查第二个单选按钮（女性）并提交表单时，我收到警告“请选择您的性别”

Answer 1

首先，正如评论中提到的j08691，没有两个HTML元素可以具有相同的id属性。其次，checked用作属性，而不是属性。请改用$("#gender").prop("checked");这将返回true或false。

Answer 2

你可以用这个：

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

JsFiddle

Answer 3

试试这个

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

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

JSFiddile

Answer 4

JavaScript的ID检测只是匹配ID的第一个实例，并且无需继续搜索，因为id属性旨在唯一。< / p>

要解决您的问题，请首先删除这些重复的ID属性，然后从以下位置更改您的jQuery选择器：

$('#gender')

要：

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

然后，您可以将其与jQuery的:checked选择器结合使用，以确定是否检查了其中一个radio元素：

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