Javascript 模糊多个单选按钮

我有一个表单，想用javascript/jquery验证它

表单中的一个字段是性别，有两个单选按钮（男性和女性）

如果用户使用键盘访问

字段，我会遇到一个小错误。当用户是女性时，她可以按tab键转到性别

当用户持续按tab键直到达到性别时，男性单选按钮首先被聚焦。由于她不是男性，她再次按tab键并按空格键，或者只按右箭头键选择“女性”，但错误已经显示

因此，我决定只在用户离开性别字段后执行函数，但我不知道如何执行。我该怎么做

当用户仍在性别单选按钮上且尚未选择单选按钮时，不得显示错误消息。

<input type="radio" name="gender" id="genderMale" value="male" />
<label for="genderMale">Male</label>
<input type="radio" name="gender" id="genderFemale" value="female" />
<label for="genderFemale">Female</label>

        $('input:radio[name=gender]').change(function () {
            var _gender = $(this).val();
            if (_gender === 'male') {
                console.log('male');
            } else {
                console.log('female');
            }
        });

男性
女性
$（'input:radio[name=gender]'）。更改（函数（）{
var_gender=$（this.val（）；
如果（_性别==‘男性’）{
console.log（'male'）；
}否则{
console.log（'female'）；
}
});

---

为什么不在无线电选择器上使用更改事件，而不是在无线电元素旁边使用onblur事件。

可能重复的（请查看新月形的新答案）@simon我不知道什么是事件冒泡。你为什么不把你的无线电输入打包成一个div或什么的，然后定义onblur呢？我不知道onblur事件是否适用于

。读一下，让我知道它是否有用：它不是一直工作的。Onchange事件在用户选择单选按钮时第一次发生（而不是在用户跳过单选按钮时）。

function verifyGender()
{
    if(document.getElementById("genderMale").checked==true || document.getElementById("genderFemale").checked==true)
    {
        // success
    }
    else
    {
        // display error message
    }
}

<input type="radio" name="gender" id="genderMale" value="male" />
<label for="genderMale">Male</label>
<input type="radio" name="gender" id="genderFemale" value="female" />
<label for="genderFemale">Female</label>

        $('input:radio[name=gender]').change(function () {
            var _gender = $(this).val();
            if (_gender === 'male') {
                console.log('male');
            } else {
                console.log('female');
            }
        });