在你用javascript提交表单之前，检查是否填写了每个单选按钮

Checking if every radiobutton is filled in before u submit a form in javascript

本文关键字：是否 单选按钮 检查 javascript 提交 表单      更新时间：2023-09-26

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

<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代码，以确保在我们提交之前每个问题都有一个答案，期待你的答案

如果你能帮忙，提前谢谢你

如果你想保持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;
}
您可以使用

JQuery 来实现这一点，这里有一个测试示例：-

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

如果将其包装在函数中，然后调用此函数onsubmit窗体的事件。验证将完成。

编辑：

此外，单选按钮名称

也应更改，每组或每组单选按钮必须具有唯一的名称。喜欢这个：-

<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>
相关文章：