使用jQuery进行单选按钮验证
我有一个工作正常的文本字段的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);
}
不要为多个元素使用相同的ID's 。
HTML： -
<input type="radio" name="gender" value="1">
<input type="radio" name="gender" value="2">
JS： -
$("input[name=gender]:checked").val()
因为你的单选按钮都有相同的ID，所以Id必须是唯一的。 如果你想检查单选按钮或不，然后尝试：
$("input[name=gender]").is(":checked")
另一件事单选按钮总是被点击，所以你不需要验证它，但你需要检查男性或女性。
设置默认检查：
<input type="radio" name="gender" class="gender" checked="checked" value="1">
您多次使用相同的ID 。 ID不能相同。 它们必须是唯一的。
使用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);
}
在这里演示。
链接地址: http://www.djcxy.com/p/88055.html