javascript - 如何测试在提交表单之前选中所有单选按钮/复选框

Question

我使用form_tag构建了一个表单，其中显示问题和答案供用户检查。这是我的表格:

<%= form_tag({ controller: 'exams', action: 'check_results' }, authenticity_token: true) do %>
  <ol class="questions">
    <% @questions.each do |question| %>
  <li class="content_question"><%= kramdown question.content %></li>

  <ol class="answers">
    <% question.answers.shuffle.each do |answer| %>
      <table class="answer_contents">
        <tbody>
      <tr>
        <% if question.question_type.shorcut == 'MC' %>
          <td><%= check_box_tag "user_answer_ids[#{question.id}][]", answer.id, false, id: "user_answer_ids_#{answer.id}" %></td>
          <td><li></li></td>
          <td><%= label_tag "user_answer_ids_#{answer.id}", kramdown(answer.content) %></td>
        <% else %>
          <td><%= radio_button_tag "user_answer_ids[#{question.id}][]", answer.id, false, id: "user_answer_ids_#{answer.id}" %></td>
          <td><li></li></td>
          <td><%= label_tag "user_answer_ids_#{answer.id}", kramdown(answer.content) %></td>
        <% end %>
      </tr>
       </tbody>
      </table>
    <% end %> <%# question.answers %>
  </ol> <%# ol.answers %>
  <br>
   <% end %> <%# @questions %>
   </ol> <%# ol.questions %>
  <%= submit_tag "Finish Exam", disable_with: "Checking results...", confirm: "Are you sure?", class: "btn btn-primary" %>
<% end %> <%# form_tag %>

我想检查用户是否忘记检查某些问题，当他们按下提交时，它会提醒用户检查错过的问题。任何人都可以帮助/指导我如何使用 javascript 或 jquery 做到这一点？谢谢。

生成的 HTML 代码

这是一个问题及其答案的 html，带有单选选项。与checkbox不同的是，有更多的table元素，并且input中的type是checkbox而不是<强>广播。

<li class="content_question"><p>What is the term used to describe a framework of the phase involved in developing information systems?</p>
</li>
<ol class="answers">
  <table class="answer_contents">
    <tbody>
      <tr>
        <td><input id="user_answer_ids_663" name="user_answer_ids[186][]" type="radio" value="663"></td>
        <td><li></li></td>
        <td><label for="user_answer_ids_663"><p>systems development life cycle (t)</p></label></td>
      </tr>
    </tbody>
  </table>
  <table class="answer_contents">
    <tbody>
      <tr>
        <td><input id="user_answer_ids_664" name="user_answer_ids[186][]" type="radio" value="664"></td>
        <td><li></li></td>
        <td><label for="user_answer_ids_664"><p>extreme programing</p></label></td>
      </tr>
    </tbody>
  </table>
  <table class="answer_contents">
    <tbody>
      <tr>
        <td><input id="user_answer_ids_665" name="user_answer_ids[186][]" type="radio" value="665"></td>
        <td><li></li></td>
        <td><label for="user_answer_ids_665"><p>rapid application development</p></label></td>
      </tr>
    </tbody>
  </table>
  <table class="answer_contents">
    <tbody>
      <tr>
        <td><input id="user_answer_ids_666" name="user_answer_ids[186][]" type="radio" value="666"></td>
        <td><li></li></td>
        <td><label for="user_answer_ids_666"><p>predictive life cycle</p></label></td>
      </tr>
    </tbody>
  </table>
</ol>

Answer 1

下面的示例向表单 myForm 的提交事件添加了一个处理程序，因此您需要为表单提供 ID myForm。这会检查每个问题是否都检查了可能的答案之一。它适用于单选答案和复选框答案。如果验证失败，它会提醒缺少答案的问题列表，然后阻止表单提交。

$(document).ready(function(){
    $('#myForm').submit(function(){

        var errors = [];

        $('.content_question').each(function(){

            var answerCont = $(this).next();
            var inputs = $(answerCont).find('input[type=radio], input[type=checkbox]');

            if(inputs.length > 0)
            {
                var groupChecked = false;

                $(inputs).each(function(){
                    if($(this).is(':checked'))
                    {
                        groupChecked = true;
                    }
                });

                if(!groupChecked)
                {
                    errors.push($(this).text().trim());
                }
            }
        });

        if(errors.length > 0)
        {
            var errorMessage = "You missed " + errors.length + " questions: \n\n";

            for(var i=0; i<errors.length; i++)
            {
                errorMessage += errors[i] + "\n";
            }
            alert(errorMessage);
            return false;
        }
    });
});