Question

我正在使用PHP进行测验，但我首先使用JavaScript来解决问题，然后提交表单并让PHP完成其余的工作。

我制作了两个名为ChangeQuestion()和BackQuestion()的JavaScript函数。

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 &raquo;</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 &raquo;</button>
    </div>

    <div id="question2" style="display:none;">
        2. What is the proper way to add a blue background to the <code>&lt;body></code> and remove the margin &amp; padding?
        <br />
        <br />
        <input type="radio" name="q2" id="q2-a1" /> 
        <label for="q2-a1">&lt;body backgroundColor="blue" padding="0" margin="0"&gt;</label>
        <br />
        <input type="radio" name="q2" id="q2-a2" /> 
        <label for="q2-a2">&lt;body style="background-color: blue; margin: 0; padding: 0;"&gt;</label>
        <br />
        <input type="radio" name="q2" id="q2-a3" /> 
        <label for="q2-a3">&lt;body style="backgroundColor: blue; margin: 0px; padding: 0px;"&gt;</label>
        <br />
        <input type="radio" name="q2" id="q2-a4" /> 
        <label for="q2-a4">&lt;body background="blue" padding="0" margins="0"&gt;</label>
        <br /><br />
        <button type="button" onclick="BackQuestion('question1','question2');$('#qIndicator').html('Question 1 of 10');">&laquo; Back</button>
        <button type="button" onclick="ChangeQuestion('question2','question3');$('#qIndicator').html('Question 3 of 10');">Next &raquo;</button>
    </div>

    <div id="question3" style="display:none;">
        3. Which of the following font styling tags isn&#39;t valid?
        <br />
        <br />
        <input type="radio" name="q3" id="q3-a1" /> 
        <label for="q3-a1">&lt;small&gt;</label>
        <br />
        <input type="radio" name="q3" id="q3-a2" /> 
        <label for="q3-a2">&lt;strong&gt;</label>
        <br />
        <input type="radio" name="q3" id="q3-a3" /> 
        <label for="q3-a3">&lt;em&gt;</label>
        <br />
        <input type="radio" name="q3" id="q3-a4" /> 
        <label for="q3-a4">&lt;large&gt;</label>
        <br /><br />
        <button type="button" onclick="BackQuestion('question2','question3');$('#qIndicator').html('Question 2 of 10');">&laquo; Back</button>
        <button type="button" onclick="ChangeQuestion('question3','question4');$('#qIndicator').html('Question 4 of 10');">Next &raquo;</button>
    </div>

    <div id="question4" style="display:none;">
        4. Suppose you have this HTML on your page:
        <br /><br />
        <code>
            &lt;a name="target4"&gt;Old listing&lt;/a&gt;
        </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">&lt;a url="#target4"&gt;Check Old Listing as well&lt;/a&gt; </label>
            <br />
            <input type="radio" name="q4" id="q4-a2" /> 
            <label for="q1-a2">&lt;a href="#target4"&gt;Check Old Listing as well&lt;/a&gt;</label>
            <br />
            <input type="radio" name="q4" id="q4-a3" /> 
            <label for="q1-a3">&lt;link url="target4"&gt;Check Old Listing as well&lt;/link&gt; </label>
            <br />
            <input type="radio" name="q4" id="q4-a4" /> 
            <label for="q1-a4">&lt;a href="Listing.target4"&gt;Check Old Listing as well&lt;/a&gt;</label>
            <br /><br />
            <button type="button" onclick="BackQuestion('question3','question4');$('#qIndicator').html('Question 3 of 10');">&laquo; Back</button>
            <button type="button" onclick="ChangeQuestion('question4','question5');$('#qIndicator').html('Question 5 of 10');">Next &raquo;</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');">&laquo; Back</button>
                <button type="button" onclick="ChangeQuestion('question5','question6');$('#qIndicator').html('Question 6 of 10');">Next &raquo;</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');">&laquo; Back</button>
                <button type="button" onclick="ChangeQuestion('question6','question7');$('#qIndicator').html('Question 7 of 10');">Next &raquo;</button>
            </div>

        </form>

是的，很长。对于那个很抱歉。但是，我提供了一个更容易理解的jsFiddle。（因为预览等）

我知道如何检查收音机是否被选中，但我不知道如何确保使用此功能选择。

Answer 1

使用: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);
    });

see here

Answer 2

使用: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);
    });
}

Answer 3

您也可以使用$("[name=q1]").is(":checked")来检查是否选择了某些内容。当然，请用q1替换您所处的问题。在您的情况下，您似乎将使用q1，q2等

如何检查此功能中是否至少选中了一个单选按钮？

3 个答案: