单选按钮只显示第一个输入,如何获得所需的一个?
问题描述:
单选按钮无法正常工作,即使我选择其他收音机,也总是会将男性作为输出。我从提交的表单创建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>
帮助我。谢谢。
答
更改脚本$ .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>")
}
});
在你的脚本,你只是在集合中添加文本值,如果在其他情况下,然后点击文本你需要添加额外的一些逻辑在集合中添加该值
在您的情况下,两个单选按钮都在循环中并且邮件单选按钮呈现在最后,因此您总是从单选按钮获取邮件,因为您没有添加任何条件无线电按钮被检查与否
为什么'document.wr ite'? – Rayon
您不能使用val()作为复选框/收音机。请参阅链接http://api.jquery.com/val/。 http://stackoverflow.com/questions/2272507/find-out-if-radio-button-is-checked-with-jquery – Vivasaayi