验证多组单选按钮-仅限Javascript

我试图同时验证多组单选按钮。我不仅无法验证它们，而且无法让div中的错误显示出来。选择该选项后，我希望验证并保存该值，以便以后可以将该值保存在本地存储中。（此时我不想打印它，我只想通过值进行验证并确保选择了某些内容）我不确定我做错了什么，以下是我的代码：

因为我不能只发布JSFIDLE，还需要附带代码，所以这里是我的HTML：

<tr>
  <td><label>Whats your favorite color:</label:>
  </td>
  <div id="color"></div>
  <td>
    <fieldset id="group1">
      <input type="radio" value="blue" name="color">Blue
      <input type="radio" value="red" name="color">Red
      <div>

      </div>
    </fieldset>
  </td>
</tr>

<tr>
  <td><label>What is your favorite food:</label></td>
  <div id="food"></div>
  <td>
    <fieldset id="group2">
      <input type="radio" id="pizza" name="food">Pizza
      <input type="radio" id="cake" name="food">Cake
    </fieldset>
  </td>

</tr>

<tr>
  <td><label>Do you go to school:</label></td>
  <div id="school"></div>
  <td>
    <fieldset id="group3">
      <input type="radio" id="yes" name="school">Yes
      <input type="radio" id="no" name="school">No
    </fieldset>
  </td>
</tr>
<input type="button" value="Save" onclick="validateForm();" />

你最喜欢什么颜色
蓝色
红色
你最喜欢的食物是什么：
披萨
蛋糕
你上学吗：
对
不

---

注意可能的重复：我知道以前有人问过这个问题。我读过类似问题的答案，但我还是迷路了。对于一些答案，我很难理解Javascript，因为它们使用了一种称为模板文本的东西。一些答案也使用了jQuery，我还没有学会。一些答案也使用了formData（），但我还没有学会这一点，所以我尝试使用目前为止我所知道的基本javascript来编写代码。

如果要比较两件事，您可能会遇到一些问题，您必须使用&而不是&在您的情况下，您尝试使用的是or（| | |）因为你想检查蓝色是选中OD还是红色是选中的

为了增加一个让您的生活更轻松的技巧，您不需要编写document.getElementById（“myid”），只要在javascript代码中存在的元素上添加id，就可以直接使用它：

myid.dosomestuff();

textContent是innerHTML的一个更具代表性的替代品，因为它可以去除文本中的html标记。 此外，您可能还希望删除返回语句：

函数validateForm（）{
如果（！（蓝色.勾选|红色.勾选））{
color.textContent=“请选择一种颜色”；
console.log（blue.value）；
}
否则{
color.textContent=“”；
}
如果（！（比萨饼.勾选| |蛋糕.勾选））{
food.textContent=“请选择一种食物”；
console.log（pizza.value）；
}
否则{
食品。textContent=“”；
}
如果（！（是选中| |否选中））{
school.textContent=“如果你去学校，请选择一个选项”；
console.log（yes.value）；
}
否则{
school.textContent=“”；
}
}

你最喜欢什么颜色
蓝色
红色
你最喜欢的食物是什么：
披萨
蛋糕
你上学吗：
对
不

将所有内容包装成表单。 定义它，然后访问表单元素值，如颜色：

form.elements[“color”].value

此外，还为食物和学校增加了淡水河谷，以便以同样的方式使用。 这是你想要的吗

另外，如果这是提交表单，您只需要将required添加到一组单选按钮中，以便HTML进行验证，并且用户必须从组中选择一个。提交按钮只发送所选的值，您根本不需要JS

希望这能有所帮助，我很容易理解你的愿望

函数validateForm（）{
var form=document.getElementById（“测试”）；
如果（！（蓝色.勾选|红色.勾选））{
color.textContent=“请选择一种颜色”；
}
否则{
color.textContent=（form.elements[“color”].value）；
}
如果（！（比萨饼.勾选| |蛋糕.勾选））{
food.textContent=“请选择一种食物”；
}
否则{
food.textContent=（form.elements[“food”].value）；
}
如果（！（是选中| |否选中））{
school.textContent=“如果你去学校，请选择一个选项”；
}
否则{
school.textContent=（form.elements[“school”].value）；
}
}

你最喜欢什么颜色
蓝色
红色
你最喜欢的食物是什么：
披萨
蛋糕
你上学吗：
对
不
< /代码>单选按钮不是用于此用途的，您可以考虑使用复选选择的复选框，使用单选按钮，我在其他问题上看到了对它们进行的验证，所以我知道这是可能的，但我在为我的问题具体验证方面有困难。很抱歉我误读了这个问题我知道你说我不需要使用document.getElementById，但是如果我习惯了使用它。如果我想在函数调用之后立即使用它，我会像这样使用它吗？例如：var red=document.getElementById（“red”）.value；？就像我以前用的一样@CodeAnjero如果我想获取要保存在本地存储中的所选选项的值，我将如何操作，因为代码正在检查是否选中了这两个选项中的任何一个@codeanjeroyes您可以像document.getElementById（“red”）.value那样执行。如果您想要检查值，您只需使用id.value并存储它，例如，如果您存储red.value=“no”，那么您将自动知道blue.value=yes，因此您不需要检查它是一个还是另一个。我有点困惑。是否可以确保用户选择一个选项并获得他们选择的值？如果是的话，我不确定我将如何同时做到这一点，因为这就是我的目标@codeanjeroYes这是可能的，这完全取决于您想要如何获取值。例如，您可以拥有一个数组，并将其推送到每个if条件中，然后在末尾返回它，或者您可以在if语句中直接使用它