javascript - 使用可重复的 Javascript 函数来验证多个单选按钮组

Question

我在这里(以及通过 Google)查看了许多不同的问题，但未能找到接近我正在寻找的答案。

我有一个表单(使用表格设置)，其中有多个单选按钮组，我正在尝试使用 JS 对其进行验证。我知道我可以为每个组编写一个函数来完成所需的任务，但是我正在尝试使用尽可能少的函数来简化我的 JS 脚本，所以这里是。

我正在尝试编写一个函数，该函数将检查选择了哪个单选按钮并根据所做的选择执行不同的任务。

HTML 代码:

    <tr>
        <td class="left"><span class="required">*</span>Only approved Ingredients Used:</td>
        <td>
            <label><input name="approve" type="radio" required id="approve_0" value="Yes">Yes</label>
            <label><input name="approve" type="radio" required id="approve_1" value="No">No</label>
        </td>
    </tr>

对于像这样的每个部分(我有大约 15 个这样的部分)，我尝试使用“onChange =“somefunction()”调用，这将导致错误消息“(标签名称)必须完成”，如下所示并导致出现一个文本框，供用户在提交表单之前输入“纠正措施”。

任何帮助将不胜感激

我也想远离 jquery

Answer 1

var submit = document.getElementById('submit');
var approve = document.getElementsByClassName('approve');

function approveRad() {
  var selected = false;
  for (var i = 0; i < approve.length; i++) {
    if (approve[i].checked) {
      selected = true;
      break;
    }
  }
  if (!selected) {
    alert(approve.id + " must be completed");
    return;
  }

}

tr {
  width: 30%;
}
input {
  outline: 1px solid blue;
}

<form action="return false">
  <table>

    <tr>
      <td class="left"><span class="required">*</span>Only approved Ingredients Used:</td>
      <td>
    </tr>
    <tr>
      <td>
        <label>
          <input name="approve" class="approve" type="radio" required id="approve_0" value="Yes">Yes</label>
        <label>
          <input name="approve" class="approve" type="radio" required id="approve_1" value="No">No</label>

        <td>
    </tr>
    <tr>
      <td>
        <label>
          <input name="approve" class="approve" type="radio" required id="approve_2" value="Yes">Yes</label>
        <label>
          <input name="approve" class="approve" type="radio" required id="approve_3" value="No">No</label>

      </td>
    </tr>
    <tr>
      <td>
        <label>
          <input name="approve" class="approve" type="radio" required id="approve_4" value="Yes">Yes</label>
        <label>
          <input name="approve" class="approve" type="radio" required id="approve_5" value="No">No</label>

      </td>
    </tr>
    <tr>
      <td>
        <label>
          <input name="approve" class="approve" type="radio" required id="approve_6" value="Yes">Yes</label>
        <label>
          <input name="approve" class="approve" type="radio" required id="approve_7" value="No">No</label>



      </td>
    </tr>
  </table>
  <input id="submit" type="submit" value="Submit" onsubmit="approveRad();" />
</form>