[英]How to check if at least one radio button is checked in this function?
我正在使用PHP進行測驗,但是我正在使用JavaScript首先在問題之間移動,然后提交表單,讓PHP完成其余工作。
我制作了兩個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);
});
}
它們很基本。 但是我想做的是在繼續使用該功能之前,檢查他們是否至少一個單選按鈕處於問題中。 您將可以在我的標記/ HTML中查看我如何使用上述功能。
首先,這是一個jsFiddle: http : //jsfiddle.net/3XdUA/
這是我的標記:
<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>
是的,很長。 對於那個很抱歉。 但是,我提供了一個jsFiddle,它更容易理解。 (由於預覽等)
我確實知道如何檢查是否選擇了收音機,但是我不知道如何確保使用此功能選擇了收音機。
使用: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);
});
}
我更新的替代方法是
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);
});
}
}
我只是不喜歡重復
current.fadeOut(600, function() {
$('#' + next).fadeIn(600);
});
使用: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);
});
}
您也可以使用$("[name=q1]").is(":checked")
來檢查是否選擇了某些內容。 當然,用任何一個問題代替q1
。 在您的情況下,您似乎將使用q1
, q2
等。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.