js單選按鈕檢查

Question

我正在嘗試向我的網站添加多選題（例如調查）。 為此，我正在使用js和jquery。 我添加了功能以確保所有組按鈕均已選中。 但是錯誤是我無法正確解決對選定項的檢查。 Js僅首先檢查是否，如果是，那么所有問題都回答為是，如果不是，那么所有答案都是錯誤的。

這是我的js代碼：

function doAjaxPost() {
    var result = 4;
    var rightAnswers = 0;
    var allmarked = 0;
    var response = "";
    $('.answers').each(function() {
        if ($(this).find('input[type="radio"]:checked').length > 0) {
            allmarked = allmarked + 1;
        } else {
            alert("not all checked");
        }
    });
    if (allmarked == result) {
        allmarked = 0;

        if ($("input[@name=7]:checked").val() == "right") {
            rightAnswers = rightAnswers + 1;
        }

        if ($("input[@name=8]:checked").val() == "right") {
            rightAnswers = rightAnswers + 1;
        }

        if ($("input[@name=9]:checked").val() == "right") {
            rightAnswers = rightAnswers + 1;
        }

        if ($("input[@name=10]:checked").val() == "right") {
            rightAnswers = rightAnswers + 1;
        }

        $('#info').html(rightAnswers + " / " + result);
    }
}

這是我的HTML：

<div class="clearfix single_content">
    <div class="tom-right">
        <h4 class="tom-right">1.4</h4> 
        <br />
        <ul class="answers">
            <input type="radio" name="9" value="1" id="9a" />
            <label for="9a">1</label>
            <br/>
            <input type="radio" name="9" value="2" id="9b" />
            <label for="9b">2</label>
            <br/>
            <input type="radio" name="9" value="3" id="9c" />
            <label for="9c">3</label>
            <br/>
            <input type="radio" name="9" value="right" id="9d" />
            <label for="9d">right</label>
            <br/>
        </ul>
    </div>
</div>


<div class="clearfix single_content">
    <div class="tom-right">
        <h4 class="tom-right">1.5</h4> 
        <br />
        <ul class="answers">
            <input type="radio" name="10" value="1" id="10a" />
            <label for="10a">1</label>
            <br/>
            <input type="radio" name="10" value="2" id="10b" />
            <label for="10b">2</label>
            <br/>
            <input type="radio" name="10" value="3" id="10c" />
            <label for="10c">3</label>
            <br/>
            <input type="radio" name="10" value="right" id="10d" />
            <label for="10d">right</label>
            <br/>
        </ul>
    </div>
</div>

我到此為止。 坦率地說，這似乎是一個愚蠢的問題，但是我沒有在js中進行特殊化。 因此，任何幫助將不勝感激

Answer 1

由於選擇了此無線電組，因此只能選擇一個。 如果要解決這種情況，則需要使用復選框來實現；解決問題的方法是，在單擊復選框之一時，每個選項都將clickevent綁定在一起，然后click func可以實現所選擇的每個選項

Answer 2

您可以嘗試以下操作：您可以創建帶有問題和相關正確答案的對象：

 function doAjaxPost() { var result = $('.answers').length; var rightAnswers =0 ; var response= "" ; var error=false; var correct_answers = [{question_number:1,answers_number:5}, {question_number:10,answers_number:2}, {question_number:9,answers_number:3}]; $('.answers').each(function(){ if($(this).find('input[type="radio"]:checked').length > 0){ var question_number=$(this).find('input[type="radio"]:checked').attr("name"); var answer_number =$(this).find('input[type="radio"]:checked').val(); $.each(correct_answers, function( index, value ) { if(question_number==value.question_number && answer_number==value.answers_number)rightAnswers++; }); } else error=true; }); if(error) alert("not all checked"); //display the error once else $('#info').html(rightAnswers + " / " + result); } $('#check_values').click(function(){ doAjaxPost(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="clearfix single_content"> <div class="tom-right"> <h4 class="tom-right">1.4</h4> <br /> <ul class="answers"> <input type="radio" name="9" value="1" id="9a" /> <label for="9a">1</label><br/> <input type="radio" name="9" value="2" id="9b" /> <label for="9b">2</label><br/> <input type="radio" name="9" value="3" id="9c" /> <label for="9c">3</label><br/> <input type="radio" name="9" value="4" id="9d" /> <label for="9d">4</label><br/> </ul> </div> </div> <div class="clearfix single_content"> <div class="tom-right"> <h4 class="tom-right">1.5</h4> <br /> <ul class="answers"> <input type="radio" name="10" value="1" id="10a" /> <label for="10a">1</label><br/> <input type="radio" name="10" value="2" id="10b" /> <label for="10b">2</label><br/> <input type="radio" name="10" value="3" id="10c" /> <label for="10c">3</label><br/> <input type="radio" name="10" value="4" id="10d" /> <label for="10d">4</label><br/> </ul> </div> </div> <input type="button" id="check_values" value="Check"/> <p id="info"></p>