Question

我在文本字段上有一个jQuery验证工作正常，但是当我将它应用于单选按钮时，它不起作用。我不知道我哪里错了。

我的HTML和jQuery代码是，

<input type="text" placeholder="Name" name="name" id="name">
<input type="radio" name="gender" id="gender" value="1">
<input type="radio" name="gender" id="gender" value="2">

var name= jQuery('#name').val();
var gender= jQuery('#gender').val();
if(name.length == 0){
    var error = true;
    jQuery('#name_error').fadeIn(500);
    }else{
    jQuery('#name_error').fadeOut(500);
}
if(gender.value == 0){
    var error = true;
    jQuery('#gender_error').fadeIn(500);
    }else{
    jQuery('#gender_error').fadeOut(500);
}

Answer 1

获取无线电值，

var gender =  jQuery('input[name=gender]:checked').val();


if(!jQuery('input[name=gender]').is(":checked")){
    var error = true;
    jQuery('#gender_error').fadeIn(500);
    }else{
    jQuery('#gender_error').fadeOut(500);
}

Answer 2

不要对多个元素使用相同的ID's。

<强> HTML： -

<input type="radio" name="gender" value="1">
<input type="radio" name="gender" value="2">

<强> JS： -

$("input[name=gender]:checked").val()

Answer 3

因为您的单选按钮都具有相同的ID，所以Id必须是唯一的。如果要检查是否单击了单选按钮，请尝试：

$("input[name=gender]").is(":checked")

另一件事总是点击一个单选按钮，所以你不需要验证它，但你需要检查男性或女性。

设置默认检查：

<input type="radio" name="gender" class="gender" checked="checked" value="1">

Answer 4

您多次使用相同的ID次。 ID s不能相同。它们必须是独一无二的。

使用prop()检测是否选中了单选按钮。它返回布尔值。

JS：

$('#name_error,#gender_error').fadeOut();
var name = jQuery('#name').val();    
if (name.length == 0) {
    jQuery('#name_error').fadeIn(500);
}
if(!($("input[name='gender']").prop("checked"))){
    $('#gender_error').fadeIn(500);
}

DEMO here.

Answer 5

如果你想验证Checkboxes和ridiobuttons使用jquery is（）和validate：checked参数

<input type="text" placeholder="Name" name="name" id="name">
<input type="radio" name="gender" id="gender" value="1">
<input type="radio" name="gender" id="gender" value="2">

var name= jQuery('[name=name]');    
var gender= jQuery('[name=gender]');
if(!name.is(':checked')){
    var error = true;
    jQuery('#name_error').fadeIn(500);
}else{
    jQuery('#name_error').fadeOut(500);
}
if(!gender.is(':checked')){
    var error = true;
    jQuery('#gender_error').fadeIn(500);
}else{
    jQuery('#gender_error').fadeOut(500);
}

Answer 6

尝试：

<input type="radio" name="gender" class="gender" value="1">
<input type="radio" name="gender" class="gender" value="2">

<script>
var checked = $('.gender:checked');
if(checked.length == 0) {
    var error = true;
    $('#gender_error').fadeIn(500);
} else {
    $('#gender_error').fadeOut(500);
}
</script>

Answer 7

您在2个元素中具有相同的ID 性别错误。尝试改变：

<input type="text" placeholder="Name" name="name" id="name">
<input type="radio" name="gender" class="gender" value="1">
<input type="radio" name="gender" class="gender" value="2">

var name= jQuery('#name').val();
var gender= jQuery('.gender').val();
if(name.length == 0){
    var error = true;
    jQuery('#name_error').fadeIn(500);
    }else{
    jQuery('#name_error').fadeOut(500);
}
if(gender.value == 0){
    var error = true;
    jQuery('#gender_error').fadeIn(500);
    }else{
    jQuery('#gender_error').fadeOut(500);

Answer 8

<input type="radio" name="gender" id="gender1" value="1">
<input type="radio" name="gender" id="gender2" value="2">

var gender1=  jQuery('input[id=gender1]:checked').val()
    var gender2=  jQuery('input[id=gender2]:checked').val()

    if(!($("input[id='gender1']").prop("checked"))){
        if(!($("input[id='gender1']").prop("checked"))){
        var error = true;
        jQuery('#gender_error').fadeIn(500);  

        } else { jQuery('#gender_error').fadeOut(500); }

    } else {
        jQuery('#gender_error').fadeOut(500);
    }

使用jQuery进行单选按钮验证

8 个答案: