单选按钮只显示第一个输入,如何获得所需的一个?

单选按钮只显示第一个输入,如何获得所需的一个?

问题描述:

单选按钮无法正常工作,即使我选择其他收音机,也总是会将男性作为输出。我从提交的表单创建json对象,您可以在对象中检查单选按钮的值。单选按钮只显示第一个输入,如何获得所需的一个?

<script> 
 
\t \t 
 
\t $.validator.setDefaults({ 
 
\t \t submitHandler: function() { 
 
\t \t \t var $inputs = $('#myForm :input'); 
 
\t \t \t var values = {}; 
 
\t \t \t $inputs.each(function() { 
 
\t \t \t \t values[this.name] = $(this).val(); 
 
\t \t \t }); 
 
\t \t \t document.write(values['gender']) 
 
\t \t \t document.write("<h1>User Details</h1>"); 
 
\t \t \t document.write("<table border=1><tbody>") 
 
\t \t \t for(key in values) 
 
\t \t \t { 
 
\t \t \t \t document.write("<tr><td>"+key+"</td><td>"+values[key]+"</td></tr>"); 
 
\t \t \t } 
 
\t \t \t document.write("</tbody></table>") 
 
\t \t } 
 
\t }); 
 
\t 
 
\t $(document).ready(function() 
 
\t { 
 
\t \t 
 
\t \t $("#myForm").validate(
 
\t \t \t \t { 
 
\t \t \t \t \t rules:{ 
 
\t \t \t \t \t \t \t fname:{ 
 
\t \t \t \t \t \t \t \t \t required:true, 
 
\t \t \t \t \t \t \t \t \t minlength:3, 
 
\t \t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t lname:{ 
 
\t \t \t \t \t \t \t \t \t required:true, 
 
\t \t \t \t \t \t \t \t \t minlength:3 
 
\t \t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t email:{ 
 
\t \t \t \t \t \t \t \t \t required:true, 
 
\t \t \t \t \t \t \t \t \t email:true 
 
\t \t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t agree:"required", 
 
\t \t \t \t \t \t \t Car:{required:true}, 
 
\t \t \t \t \t \t \t gender:{required:true} 
 
\t \t \t \t \t \t \t }, 
 
\t \t \t \t \t messages: 
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t fname:{ 
 
\t \t \t \t \t \t \t \t \t required:"First Name required..", 
 
\t \t \t \t \t \t \t \t \t minlength:"First Name should atleast have 3 characters..", 
 
\t \t \t \t \t \t \t \t \t uniqueUserName:"First name should be unique.." 
 
\t \t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t lname:{ 
 
\t \t \t \t \t \t \t \t \t required:"Last Name required..", 
 
\t \t \t \t \t \t \t \t \t minlength:"Last Name should atleast have 3 characters.." 
 
\t \t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t email:{ 
 
\t \t \t \t \t \t \t \t \t required:"email address required.." 
 
\t \t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t agree:"Please accept our terms..", 
 
\t \t \t \t \t \t \t Car:{required:"Please select one option"}, 
 
\t \t \t \t \t \t \t gender:{required:"Gender is required..."} 
 
\t \t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t); 
 
\t }); 
 

 
</script>
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Registration Form Using jQuery - Demo Preview</title> 
 
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script> 
 
</head> 
 
<body> 
 
<form id="myForm" method="get"> 
 
\t FirstName :<br> 
 
\t <input type="text" name="fname" id="fname"><br> 
 
\t LastName : <br> 
 
\t <input type="text" name="lname" id="lname" ><br> 
 
\t Email : <br> 
 
\t <input type="email" name="email" id="email"><br> 
 
\t URL : <br> 
 
\t <input type="url" name="url" id="url"><br> 
 
\t <br> 
 
\t Agree Terms:<br> 
 
\t <input type="checkbox" name="agree" id="agree"><br> 
 
\t 
 
\t Gender:<br> 
 
\t <input type="radio" name="gender" value="female" id="female"> Female<br> 
 
\t <input type="radio" name="gender" value="male" id="male"> Male<br> 
 
\t <select id="Car", name="Car"> 
 
\t <option value="">Select</option> 
 
\t <option value="saab">Saab</option> 
 
\t <option value="mercedes">Mercedes</option> 
 
\t <option value="audi">Audi</option> 
 
\t </select><br><br> 
 
\t <button type="submit" class="submit" id="submit">Submit</button> 
 
</form> 
 

 

 
</body> 
 
</html>

帮助我。谢谢。

+0

为什么'document.wr ite'? – Rayon

+0

您不能使用val()作为复选框/收音机。请参阅链接http://api.jquery.com/val/。 http://stackoverflow.com/questions/2272507/find-out-if-radio-button-is-checked-with-jquery – Vivasaayi

更改脚本$ .validator.setDefaults({按以下

$.validator.setDefaults({ 
    submitHandler: function() { 
     var $inputs = $('#myForm :input'); 
     var values = {}; 
     $inputs.each(function() { 
      if ($(this).attr("name") == "gender" || $(this).attr("name") == "agree") 
      { 
       if($(this).is(":checked")) 
        values[this.name] = $(this).val(); 
      } 
      else { 
       values[this.name] = $(this).val(); 
      }     
     }); 
     document.write(values['gender']) 
     document.write("<h1>User Details</h1>"); 
     document.write("<table border=1><tbody>") 
     for (key in values) { 
      document.write("<tr><td>" + key + "</td><td>" + values[key] + "</td></tr>"); 
     } 
     document.write("</tbody></table>") 
    } 
}); 

在你的脚本,你只是在集合中添加文本值,如果在其他情况下,然后点击文本你需要添加额外的一些逻辑在集合中添加该值

在您的情况下,两个单选按钮都在循环中并且邮件单选按钮呈现在最后,因此您总是从单选按钮获取邮件,因为您没有添加任何条件无线电按钮被检查与否