为何HTML表单Likert量表仅能同时保留一个选中答案？

你遇到的问题根源很明确：所有单选框的name属性都设置成了likert。在HTML规则里，相同name的单选框会被视为同一组，同一组内只能选中一个选项，所以你选第二个问题的选项时，会自动取消第一个问题里的选中项。

解决步骤： #

• 给每个问题的单选框组设置唯一的name值，比如第一个问题用likert_easy_use，第二个用likert_responsive，以此类推，确保不同问题的单选框组name不重复。
• 顺便修正选项的value属性——原代码里多个选项的value错误重复（比如"Strongly disagree"的value写成了strong_agree），这会导致提交数据时无法区分选项，需要改成对应的值，比如strong_disagree、neutral等。

修正后的完整代码： #

<form action="">
  <label class="statement">This HTML Likert scale is easy to use.</label>
  <ul class='likert'>
    <li>
      <input type="radio" name="likert_easy_use" value="strong_agree">
      <label>Strongly agree</label>
    </li>
    <li>
      <input type="radio" name="likert_easy_use" value="agree">
      <label>Agree</label>
    </li>
    <li>
      <input type="radio" name="likert_easy_use" value="neutral">
      <label>Neutral</label>
    </li>
    <li>
      <input type="radio" name="likert_easy_use" value="disagree">
      <label>Disagree</label>
    </li>
    <li>
      <input type="radio" name="likert_easy_use" value="strong_disagree">
      <label>Strongly disagree</label>
    </li>
  </ul>
  <label class="statement">It's clear that this is a responsive design.</label>
  <ul class='likert'>
    <li>
      <input type="radio" name="likert_responsive" value="strong_agree">
      <label>Strongly agree</label>
    </li>
    <li>
      <input type="radio" name="likert_responsive" value="agree">
      <label>Agree</label>
    </li>
    <li>
      <input type="radio" name="likert_responsive" value="neutral">
      <label>Neutral</label>
    </li>
    <li>
      <input type="radio" name="likert_responsive" value="disagree">
      <label>Disagree</label>
    </li>
    <li>
      <input type="radio" name="likert_responsive" value="strong_disagree">
      <label>Strongly disagree</label>
    </li>
  </ul>
</form>

内容的提问来源于stack exchange，提问作者Mike