Question

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

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

<input type="radio" name="gender" id="genderMale" onblur="verifyGender()">
<label for="genderMale">Male</label>
<input type="radio" name="gender" id="genderFemale" onblur="verifyGender()">
<label for="genderFemale">Female</label>

我希望通过离开它们来验证性别（使用onblur）。

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

如果用户使用他/她的键盘访问<input>字段，我会遇到一个小错误。当用户是女性时，她可以按Tab键转到性别。

当用户继续按Tab键直到达到性别时，首先聚焦男性单选按钮。由于她不是男性，她再次按下标签并按空格键或只需按右箭头键选择＆＃34;女性＆＃34;但错误已经显示。

所以，我决定在用户离开性别字段后只执行该功能，但我不知道如何。我该怎么办？

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

Answer 1

<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');
            }
        });

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

模糊多个单选按钮

1 个答案: