Question

我知道网站上还有其他帖子有解决方案，但我真的需要清楚地知道我正在做什么，我的表单如下：

<form name="multichoice" action="">
    <table>
         <tr>
             <td>Q1.</td>
             <td>Do you think you are pretty?</td>
             <td class="radiobox"><input type="radio" name="q1" value="1"/></td>
             <td class="radiobox"><input type="radio" name="q1" value="2"/></td>
             <td class="radiobox"><input type="radio" name="q1" value="3"/></td>
             <td class="radiobox"><input type="radio" name="q1" value="4"/></td>
         </tr>

         <tr>
             <td>Q2.</td>
             <td>Do you think you are smart?</td>
             <td class="radiobox"><input type="radio" name="q1" value="1"/></td>
             <td class="radiobox"><input type="radio" name="q1" value="2"/></td>
             <td class="radiobox"><input type="radio" name="q1" value="3"/></td>
             <td class="radiobox"><input type="radio" name="q1" value="4"/></td>
         </tr>
    </table>
</form>

所以我正在寻找javascript代码，以确保在我们提交之前每个问题都有答案，期待您的答案

如果可以提供帮助，请提前感谢

Answer 1

如果你想保持jQuery免费：

function isAnswered() {
  var radioGroups = {}
  for(i in (inputs = document.getElementsByTagName('input'))) {
    if(inputs[i].type === 'radio') {
      radioGroups[inputs[i].name] = radioGroups[inputs[i].name] ? true : inputs[i].checked;
    }
  }
  for(i in radioGroups) {
    if(radioGroups[i] === false) return false; 
  }
  return true;
}

这只是迭代每个无线电元素，并跟踪每个无线电组，寻找每个组的“已检查”值。 jQuery中的类似解决方案：

function isAnswered() {
  var isAnswered = true;
  $('input[type=radio]').each(function() {
    var name = $(this).attr('name');
    if($('input[name=' + $(this).attr('name') + ']:checked').length === 0) {
      isAnswered = false;
      return false;
    }
  });
  return isAnswered;
}

Answer 2

您可以使用JQuery来实现此目的，这是一个要测试的示例： -

 if (!$("input[name='q1']:checked").val()) {

       return false;
    }
    if (!$("input[name='q2']:checked").val()) {     
       return false;
    }

    return;

如果你将它包装在一个函数中，然后调用该函数的onsubmit事件。验证将完成。

编辑：

此外，单选按钮名称也应该更改，每组或一组radiobuttons必须具有唯一的名称。像这样： -

<table>
     <tr>
         <td>Q1.</td>
         <td>Do you think you are pretty?</td>
         <td class="radiobox"><input type="radio" name="q1" value="1"/></td>
         <td class="radiobox"><input type="radio" name="q1" value="2"/></td>
         <td class="radiobox"><input type="radio" name="q1" value="3"/></td>
         <td class="radiobox"><input type="radio" name="q1" value="4"/></td>
     </tr>

     <tr>
         <td>Q2.</td>
         <td>Do you think you are smart?</td>
         <td class="radiobox"><input type="radio" name="q2" value="1"/></td>
         <td class="radiobox"><input type="radio" name="q2" value="2"/></td>
         <td class="radiobox"><input type="radio" name="q2" value="3"/></td>
         <td class="radiobox"><input type="radio" name="q2" value="4"/></td>
     </tr>
</table>

在您使用javascript提交表单之前，检查是否每个radiobutton都已填写

2 个答案: