验证单选按钮以进行测验
[英]validate radio buttons for a quiz
问题描述
Need to validate radio buttons am developing a quiz page i can only validate 1 set of radio buttons any help be great below is my code. 
需要验证单选按钮正在开发测验页面，我只能验证1个单选按钮，下面的帮助对我有很大帮助。 If a user hits the submit button without answering a question I want a alert message displayed saying u must answer whatever question they didnt answer. 如果用户在不回答问题的情况下点击了提交按钮，我希望显示一条警报消息，说您必须回答他们未回答的任何问题。 Any ideas as to why the jquery wont work thanks 关于为什么jQuery无法正常工作的任何想法，谢谢
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$('#quizForm').on('submit', function() {
var emptyCount = 0;
$('li').each(function() {
var found = false;
$(this).find('input[type=radio]').each(function() {
if ($(this).prop('checked')) {
found = true;
}
});
if (!found) {
emptyCount++;
}
});
if (emptyCount > 0) {
alert('Missing checks:' + emptyCount);
return false;
}
return true;
</script>
<form action='mail.php' method='post' id='quizForm' id='1' name='quizForm' onSubmit='form()'>
<ol>
<li>
<h3>1 x 1 =</h3>
<div>
<input type='radio' name='answerOne' id='answerOne' value='A' />
<label for='answerOneA'>A)1</label>
</div>
<div>
<input type='radio' name='answerOne' id='answerOne' value='B' />
<label for='answerOneB'>B)2</label>
</div>
<div>
<input type='radio' name='answerOne' id='answerOne' value='C' />
<label for='answerOneC'>C)3</label>
</div>
</li>
<li>
<h3>1 x 6 =</h3>
<div>
<input type='radio' name='answerTwo' id='answerTwo' value='A' />
<label for='answerTwoA'>A)5</label>
</div>
<div>
<input type='radio' name='answerTwo' id='answerTwo' value='B' />
<label for='answerTwoB'>B)6</label>
</div>
<div>
<input type='radio' name='answerTwo' id='answerTwo' value='C' />
<label for='answerTwoC'>C)4</label>
</div>
</li>
<li>
<h3>2 x 8 =</h3>
<div>
<input type='radio' name='answerThree' id='answerThree' value='A' />
<label for='answerThreeA'>A)14</label>
</div>
<div>
<input type='radio' name='answerThree' id='answerThree' value='B' />
<label for='answerThreeB'>B)12</label>
</div>
<div>
<input type='radio' name='answerThree' id='answerThree' value='C' />
<label for='answerThreeC'>C)16</label>
</div>
</li>
</ol>
<input type="submit" />
</form>
</body>
</html>
2 个解决方案
解决方案1
3 2014-04-17 00:59:39
First: you should not have the same id multiple times on one page. 第一：同一页上不应多次使用相同的ID。 So the id of each answer should be different. 因此，每个答案的ID应该不同。
Anyway you can go through all the li elements and check if there's a checked radio in it. 无论如何，您都可以遍历所有li元素，并检查其中是否有选中的收音机。
$('form').on('submit', function() {
var emptyCount = 0;
$('li').each(function() {
var found = false;
$(this).find('input[type=radio]').each(function() {
if ($(this).prop('checked')) {
found = true;
}
});
if (!found) {
emptyCount++;
}
});
if (emptyCount > 0) {
alert('Missing checks');
return false;
}
return true;
});
解决方案2
1 2014-04-17 00:51:08
Writing a custom validator for your code on here would probably just be excessive. 在此处为您的代码编写自定义验证程序可能会过多。 I'd use bValidator and call it a day. 我会使用bValidator并称之为一天。
See their sections on "radio groups". 参见他们有关“无线电组”的部分。
http://bojanmauser.from.hr/bvalidator/#groups http://bojanmauser.from.hr/bvalidator/#groups
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.