单选按钮仅显示第一个输入，如何获得所需的输入

Radio button showing only first input, how to get desired one?

本文关键字：输入何获得显示第一个单选按钮更新时间：2023-09-26

单选按钮无法正常工作，即使我选择其他收音机，它也总是提供男性作为输出。我正在从提交的表单创建 json 对象，您可以签入对象的单选按钮值。

<script>
		
	$.validator.setDefaults({
		submitHandler: function() {
			var $inputs = $('#myForm :input');
			var values = {};
			$inputs.each(function() {
				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>")
		}
	});
	
	$(document).ready(function()
	{
		
		$("#myForm").validate(
				{
					rules:{
							fname:{
									required:true,
									minlength:3,
									},
							lname:{
									required:true,
									minlength:3
									},
							email:{
									required:true,
									email:true
									},
							agree:"required",
							Car:{required:true},
							gender:{required:true}
							},
					messages:
						{
							fname:{
									required:"First Name required..",
									minlength:"First Name should atleast have 3 characters..",
									uniqueUserName:"First name should be unique.."
									},
							lname:{
									required:"Last Name required..",
									minlength:"Last Name should atleast have 3 characters.."
									},
							email:{
									required:"email address required.."
									},
							agree:"Please accept our terms..",
							Car:{required:"Please select one option"},
							gender:{required:"Gender is required..."}
						}
				}
			);
	});
</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">
	FirstName :<br>
	<input type="text" name="fname" id="fname"><br>
	LastName : <br>
	<input type="text" name="lname" id="lname" ><br>
	Email : <br>
	<input type="email" name="email" id="email"><br>
	URL : <br>
	<input type="url" name="url" id="url"><br>
	<br>
	Agree Terms:<br>
	<input type="checkbox" name="agree" id="agree"><br>
	
	Gender:<br>
	<input type="radio" name="gender" value="female" id="female"> Female<br>
	<input type="radio" name="gender" value="male" id="male"> Male<br>
	<select id="Car", name="Car">
	  <option value="">Select</option>
	  <option value="saab">Saab</option>
	  <option value="mercedes">Mercedes</option>
	  <option value="audi">Audi</option>
	</select><br><br>
	<button type="submit" class="submit" id="submit">Submit</button>
</form>
</body>
</html>

帮帮我。谢谢。。

更改脚本 $.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>")
    }
});

在您的脚本中，您只需在集合中添加文本值，如果是其他文本，则需要添加额外的一些逻辑来在集合中添加该值。

在您的情况下，两个单选按钮

都在循环中，邮件单选按钮在最后一个呈现，因此您总是从单选按钮获取邮件，因为您没有添加任何条件单选按钮是否被选中。