[英]How to check if at least one radio button is checked in this function?
I'm making a quiz with PHP, but I am using JavaScript to go between the questions first and then I submit the form and let PHP do the rest. 我正在使用PHP进行测验,但是我正在使用JavaScript首先在问题之间移动,然后提交表单,让PHP完成其余工作。
I made two JavaScript functions called ChangeQuestion()
and BackQuestion()
. 我制作了两个JavaScript函数,分别称为
ChangeQuestion()
和BackQuestion()
。
function ChangeQuestion(prev, next) {
$('#' + prev).fadeOut(600, function() {
$('#' + next).fadeIn(600);
});
}
function BackQuestion(last, prev) {
$('#' + prev).fadeOut(600, function() {
$('#' + last).fadeIn(600);
});
}
They're pretty basic. 它们很基本。 But what I would like to do is check if their is at least one radio button checked in a question before continuing with the function.
但是我想做的是在继续使用该功能之前,检查他们是否至少一个单选按钮处于问题中。 You'll be able to see in my markup/HTML how I'm using the above functions.
您将可以在我的标记/ HTML中查看我如何使用上述功能。
First of all, here's a jsFiddle: http://jsfiddle.net/3XdUA/ 首先,这是一个jsFiddle: http : //jsfiddle.net/3XdUA/
Here's my markup: 这是我的标记:
<form id="quiz1" name="quiz1" method="post" action="<?php echo $_SERVER['REQUEST_URI']; ?>">
<div id="starter">
Hello! Welcome to the HTML Quiz powered by PHP. Click on Start to begin.
<br /><br />
<button type="button" onclick="ChangeQuestion('starter','question1');$('#qIndicator').fadeIn(800);">Start »</button>
</div>
<div id="question1" style="display:none;">
1. What does HTML stand for?
<br />
<br />
<input type="radio" name="q1" id="q1-a1" />
<label for="q1-a1">Hyperlinks and Text Markup Language</label>
<br />
<input type="radio" name="q1" id="q1-a2" />
<label for="q1-a2">Home Text Markup Language</label>
<br />
<input type="radio" name="q1" id="q1-a3" />
<label for="q1-a3">Hyper Text Markup Language</label>
<br />
<input type="radio" name="q1" id="q1-a4" />
<label for="q1-a4">Hyper Text Marking Language</label>
<br /><br />
<button type="button" onclick="ChangeQuestion('question1','question2');$('#qIndicator').html('Question 2 of 10');">Next »</button>
</div>
<div id="question2" style="display:none;">
2. What is the proper way to add a blue background to the <code><body></code> and remove the margin & padding?
<br />
<br />
<input type="radio" name="q2" id="q2-a1" />
<label for="q2-a1"><body backgroundColor="blue" padding="0" margin="0"></label>
<br />
<input type="radio" name="q2" id="q2-a2" />
<label for="q2-a2"><body style="background-color: blue; margin: 0; padding: 0;"></label>
<br />
<input type="radio" name="q2" id="q2-a3" />
<label for="q2-a3"><body style="backgroundColor: blue; margin: 0px; padding: 0px;"></label>
<br />
<input type="radio" name="q2" id="q2-a4" />
<label for="q2-a4"><body background="blue" padding="0" margins="0"></label>
<br /><br />
<button type="button" onclick="BackQuestion('question1','question2');$('#qIndicator').html('Question 1 of 10');">« Back</button>
<button type="button" onclick="ChangeQuestion('question2','question3');$('#qIndicator').html('Question 3 of 10');">Next »</button>
</div>
<div id="question3" style="display:none;">
3. Which of the following font styling tags isn't valid?
<br />
<br />
<input type="radio" name="q3" id="q3-a1" />
<label for="q3-a1"><small></label>
<br />
<input type="radio" name="q3" id="q3-a2" />
<label for="q3-a2"><strong></label>
<br />
<input type="radio" name="q3" id="q3-a3" />
<label for="q3-a3"><em></label>
<br />
<input type="radio" name="q3" id="q3-a4" />
<label for="q3-a4"><large></label>
<br /><br />
<button type="button" onclick="BackQuestion('question2','question3');$('#qIndicator').html('Question 2 of 10');">« Back</button>
<button type="button" onclick="ChangeQuestion('question3','question4');$('#qIndicator').html('Question 4 of 10');">Next »</button>
</div>
<div id="question4" style="display:none;">
4. Suppose you have this HTML on your page:
<br /><br />
<code>
<a name="target4">Old listing</a>
</code>
<br /><br />
How would you link to the above target?
<br />
<br />
<input type="radio" name="q4" id="q4-a1" />
<label for="q1-a1"><a url="#target4">Check Old Listing as well</a> </label>
<br />
<input type="radio" name="q4" id="q4-a2" />
<label for="q1-a2"><a href="#target4">Check Old Listing as well</a></label>
<br />
<input type="radio" name="q4" id="q4-a3" />
<label for="q1-a3"><link url="target4">Check Old Listing as well</link> </label>
<br />
<input type="radio" name="q4" id="q4-a4" />
<label for="q1-a4"><a href="Listing.target4">Check Old Listing as well</a></label>
<br /><br />
<button type="button" onclick="BackQuestion('question3','question4');$('#qIndicator').html('Question 3 of 10');">« Back</button>
<button type="button" onclick="ChangeQuestion('question4','question5');$('#qIndicator').html('Question 5 of 10');">Next »</button>
</div>
<div id="question5" style="display:none;">
5. What does HTML stand for?
<br />
<br />
<input type="radio" name="q2" id="q2-a1" />
<label for="q1-a1">Hyper Tool Markup Language</label>
<br />
<input type="radio" name="q2" id="q2-a2" />
<label for="q1-a2">Home Text Markup Language</label>
<br />
<input type="radio" name="q2" id="q2-a3" />
<label for="q1-a3">Hyper Text Markup Language</label>
<br />
<input type="radio" name="q2" id="q2-a4" />
<label for="q1-a4">Hyper Text Marking Language</label>
<br /><br />
<button type="button" onclick="BackQuestion('question4','question5');$('#qIndicator').html('Question 4 of 10');">« Back</button>
<button type="button" onclick="ChangeQuestion('question5','question6');$('#qIndicator').html('Question 6 of 10');">Next »</button>
</div>
<div id="question6" style="display:none;">
6. What does HTML stand for?
<br />
<br />
<input type="radio" name="q2" id="q2-a1" />
<label for="q1-a1">Hyper Tool Markup Language</label>
<br />
<input type="radio" name="q2" id="q2-a2" />
<label for="q1-a2">Home Text Markup Language</label>
<br />
<input type="radio" name="q2" id="q2-a3" />
<label for="q1-a3">Hyper Text Markup Language</label>
<br />
<input type="radio" name="q2" id="q2-a4" />
<label for="q1-a4">Hyper Text Marking Language</label>
<br /><br />
<button type="button" onclick="BackQuestion('question5','question6');$('#qIndicator').html('Question 5 of 10');">« Back</button>
<button type="button" onclick="ChangeQuestion('question6','question7');$('#qIndicator').html('Question 7 of 10');">Next »</button>
</div>
</form>
Yes, it is long. 是的,很长。 Sorry about that.
对于那个很抱歉。 But, I provided a jsFiddle which would be much easier to understand.
但是,我提供了一个jsFiddle,它更容易理解。 (because of the preview, etc.)
(由于预览等)
I do know how to check if a radio is selected, but I do not know how to make sure that one is selected with this function . 我确实知道如何检查是否选择了收音机,但是我不知道如何确保使用此功能选择了收音机。
use :radio:checked
使用
:radio:checked
function ChangeQuestion(prev, next) {
var current = $('#' + prev);
var selection = current.find(":radio:checked").attr("id");
if (selection) {
alert(selection);
}
current.fadeOut(600, function() {
$('#' + next).fadeIn(600);
});
}
an alternative to my update would be 我更新的替代方法是
function ChangeQuestion(prev, next) {
var current = $('#' + prev);
if (prev != "starter") {
var selection = current.find(":radio:checked").attr("id");
if (selection === undefined) {
alert("no selection");
} else {
alert(selection);
current.fadeOut(600, function() {
$('#' + next).fadeIn(600);
});
}
} else {
current.fadeOut(600, function() {
$('#' + next).fadeIn(600);
});
}
}
I just didn't like repeating 我只是不喜欢重复
current.fadeOut(600, function() {
$('#' + next).fadeIn(600);
});
Use the :checked
pseudo selector. 使用
:checked
伪选择器。
function ChangeQuestion(prev, next) {
var prevQ = $('#'+prev);
var numChecked = prevQ.find('input[type=radio]:checked').length;
if( prev !=='starter' && numChecked == 0 ) {
// no radio checked in this question
return;
}
prevQ.fadeOut(600, function() {
$('#' + next).fadeIn(600);
});
}
You can also use $("[name=q1]").is(":checked")
just to check if something is selected. 您也可以使用
$("[name=q1]").is(":checked")
来检查是否选择了某些内容。 Of course, substitute q1
with whichever question you are on. 当然,用任何一个问题代替
q1
。 In your case it looks like you'll be using q1
, q2
, etc. 在您的情况下,您似乎将使用
q1
, q2
等。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.