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

Question

我正在尝试同时验证多组单选按钮。我不仅无法验证它们，而且还无法显示 div 中的错误。选择该选项后，我希望验证并保存该值，以便稍后将值保存在本地存储中。（此时我不想打印它我只想按值验证并确保选择了某些东西）我不确定我做错了什么，这是我的代码： https ://jsfiddle.net /7ace6uws/

由于我无法仅发布 jsfiddle 并且还需要附带代码，因此这里是我的 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 （https://developer.mozilla.org/en-US/docs/Web/API/FormData），但我还没有学会这个，所以我正在尝试使用我所知道的来编写代码到目前为止，这是基本的 javascript。

Answer 1

您的 if 可能有一些问题，要比较您必须使用 && 而不是 & 在您的情况下您要尝试做的是一个或 (||) 的两件事，因为您想检查 blue 是 checkod 还是 red 是检查。并且只是为了添加一个让您的生活更轻松的技巧，一旦您将 id 放在它存在于您的 javascript 代码中的元素上，您就不需要编写 document.getElementById("myid") 以便您可以使用它：myid.dosomestuff();textContent 是最近的 innerHTML 替代品，例如，因为它摆脱了文本中的 html 标记。您也可能想摆脱您的退货声明：function validateForm(){&nbsp; if(! (blue.checked || red.checked)){&nbsp; color.textContent="Please select a color";&nbsp; console.log(blue.value);&nbsp; }&nbsp; else{&nbsp; color.textContent="";&nbsp; }&nbsp; if(! (pizza.checked || cake.checked)){&nbsp; food.textContent="Please select a food";&nbsp; console.log(pizza.value);&nbsp; }&nbsp; else{&nbsp; food.textContent="";&nbsp; }&nbsp; if(! (yes.checked || no.checked)){&nbsp; school.textContent="Please select an option if you go to school";&nbsp; console.log(yes.value);&nbsp; }&nbsp; else{&nbsp; school.textContent="";&nbsp; }}<tr>&nbsp; <td><label>Whats your favorite color:</label:>&nbsp; </td>&nbsp; <div id="color"></div>&nbsp; <td>&nbsp; &nbsp; <fieldset id="group1">&nbsp; &nbsp; &nbsp; <input id="blue" type="radio" value="blue" name="color">Blue&nbsp; &nbsp; &nbsp; <input id="red" type="radio" value="red" name="color">Red&nbsp; &nbsp; &nbsp; <div>&nbsp;&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </fieldset>&nbsp; </td></tr><tr>&nbsp; <td><label>What is your favorite food:</label></td>&nbsp; <div id="food"></div>&nbsp; <td>&nbsp; &nbsp; <fieldset id="group2">&nbsp; &nbsp; &nbsp; <input type="radio" id="pizza" name="food">Pizza&nbsp; &nbsp; &nbsp; <input type="radio" id="cake" name="food">Cake&nbsp; &nbsp; </fieldset>&nbsp; </td></tr>&nbsp;<tr>&nbsp; <td><label>Do you go to school:</label></td>&nbsp; <div id="school"></div>&nbsp; <td>&nbsp; &nbsp; <fieldset id="group3">&nbsp; &nbsp; &nbsp; <input type="radio" id="yes" name="school">Yes&nbsp; &nbsp; &nbsp; <input type="radio" id="no" name="school">No&nbsp; &nbsp; </fieldset>&nbsp; </td></tr><input type="button" value="Save" onclick="validateForm();" />

Answer 2

将一切包装成形式。定义它，然后像这样访问表单元素的颜色值：form.elements["color"].value还添加了食物和学校的淡水河谷，以同样的方式访问它。这是你想要的吗？此外，如果这将是提交表单，您只需将 required 添加到一组单选按钮，以便 HTML 进行验证，用户必须从组中选择一个。并且只有选择的值将通过提交按钮发送，您根本不需要 JS。希望对您有所帮助，我很难理解您的需求。function validateForm(){var form = document.getElementById("test");&nbsp; if(! (blue.checked || red.checked)){&nbsp; color.textContent="Please select a color";&nbsp; }&nbsp; else{&nbsp; color.textContent=(form.elements["color"].value);&nbsp; }&nbsp; if(! (pizza.checked || cake.checked)){&nbsp; food.textContent="Please select a food";&nbsp; }&nbsp; else{&nbsp; food.textContent=(form.elements["food"].value);&nbsp; }&nbsp; if(! (yes.checked || no.checked)){&nbsp; school.textContent="Please select an option if you go to school";&nbsp; }&nbsp; else{&nbsp; school.textContent=(form.elements["school"].value);&nbsp; }}<form id="test"><tr>&nbsp; <td><label>Whats your favorite color:</label:>&nbsp; </td>&nbsp; <div id="color"></div>&nbsp; <td>&nbsp; &nbsp; <fieldset id="group1">&nbsp; &nbsp; &nbsp; <input id="blue" type="radio" value="blue" name="color">Blue&nbsp; &nbsp; &nbsp; <input id="red" type="radio" value="red" name="color">Red&nbsp; &nbsp; &nbsp; <div>&nbsp;&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </fieldset>&nbsp; </td></tr><tr>&nbsp; <td><label>What is your favorite food:</label></td>&nbsp; <div id="food"></div>&nbsp; <td>&nbsp; &nbsp; <fieldset id="group2">&nbsp; &nbsp; &nbsp; <input type="radio" id="pizza" name="food" value="Pizza">Pizza&nbsp; &nbsp; &nbsp; <input type="radio" id="cake" name="food" value="Cake">Cake&nbsp; &nbsp; </fieldset>&nbsp; </td></tr>&nbsp;<tr>&nbsp; <td><label>Do you go to school:</label></td>&nbsp; <div id="school"></div>&nbsp; <td>&nbsp; &nbsp; <fieldset id="group3">&nbsp; &nbsp; &nbsp; <input type="radio" id="yes" name="school"value="Yes">Yes&nbsp; &nbsp; &nbsp; <input type="radio" id="no" name="school" value="No" >No&nbsp; &nbsp; </fieldset>&nbsp; </td></tr><input type="button" value="Save" onclick="validateForm();" /></form>