使用jQuery

Question

我已经创建了一个非常基础的调查，我需要在提交到我们的数据库之前验证所有问题是否已经完成。做了一些研究，我设法找到了这个问题多次和一些回复。最接近我的要求的是

$(document).on('submit', 'form', function () {

    var validate = true;
    var unanswered = new Array();

    // Loop through available sets
    $('.option').each(function () {
        // Question text
        var question = $(this).prev().text();
        // Validate
        if (!$(this).find('input').is(':checked')) {
            // Didn't validate ... dispaly alert or do something
            unanswered.push(question);

            validate = false;
        }
    });

    if (unanswered.length > 0) {
        msg = "Please answer the following questions:\n" + unanswered.join('\n'); 
        alert(msg);
    }
    return validate;
});

唯一的问题是，脚本循环遍历所有的radiobuttons，它不仅显示警报中没有检查答案的问题，还显示多个答案（来自单选按钮的选项）

有人可以帮我编辑代码，以便只显示未回答的问题吗？我以为我可以在答案中添加另一个div，但这并没有帮助。我非常确定$(this).prev().text();需要进行编辑，但不确定如何只抓住问题本身。

我的HTML代码

<div class="question option">Question Test 1<br>
    <input name="question[1]" type="hidden" value="Test 1 required">
    <div class="answer">
        <input name="answer[1]" type="radio" value="Strongly agree">Strongly agree<br>
        <input name="answer[1]" type="radio" value="Agree">Agree<br>
        <input name="answer[1]" type="radio" value="Disagree">Disagree<br>
        <input name="answer[1]" type="radio" value="Strongly disagree">Strongly disagree<br>
        <input name="id" type="hidden" value="9AE9CBA7">
    </div>
</div>
<div class="question option">Question Test 2<br>
    <input name="question[2]" type="hidden" value="Test 2 required">
    <div class="answer">
        <input name="answer[2]" type="radio" value="Strongly agree">Strongly agree<br>
        <input name="answer[2]" type="radio" value="Agree">Agree<br>
        <input name="answer[2]" type="radio" value="Disagree">Disagree<br>
        <input name="answer[2]" type="radio" value="Strongly disagree">Strongly disagree<br>
        <input name="id" type="hidden" value="9AE9CBA7">
    </div>
</div>
<div class="question option">Question Test 3<br>
    <input name="question[3]" type="hidden" value="Test 3 required">
    <div class="answer">
        <input name="answer[3]" type="radio" value="Strongly agree">Strongly agree<br>
        <input name="answer[3]" type="radio" value="Agree">Agree<br>
        <input name="answer[3]" type="radio" value="Disagree">Disagree<br>
        <input name="answer[3]" type="radio" value="Strongly disagree">Strongly disagree<br>
        <input name="id" type="hidden" value="9AE9CBA7">
    </div>
</div>

Answer 1

您可以在问题文本周围添加span，以便于选择。

<div class="question">
    <span class="label">Question Test 1</span><br>
    <input name="question[1]" type="hidden" value="Test 1 required">
    <input name="answer[1]" type="radio" value="Strongly agree">Strongly agree<br>
    <input name="answer[1]" type="radio" value="Agree">Agree<br>
    <input name="answer[1]" type="radio" value="Disagree">Disagree<br>
    <input name="answer[1]" type="radio" value="Strongly disagree">Strongly disagree<br>
    <input name="id" type="hidden" value="9AE9CBA7">
</div>

所以jQuery变成了

$('.question').each(function () {
    //find span element within div.question with class 'label' and get the text
    var question = $(this).find('span.label').text();

    //rest of code...
});