HTML表单radio字段重置功能失效问题求助

你的代码里有几个关键问题，不仅导致Radio选项没法正常重置，还会影响总价计算的正确性：

1. 重复使用同一个ID menu：多个元素（Radio按钮、Output显示框）共用了同一个ID，这违反了HTML里ID必须唯一的规则，会导致DOM查询混乱，也干扰了表单的默认重置行为。
2. 获取选中Radio的方式错误：用document.getElementById("menu").value根本拿不到当前选中的Radio值，因为ID唯一，它只会返回第一个匹配的元素。
3. Output内容不会被Reset自动清空：默认情况下，表单的Reset按钮只重置输入类控件，Output显示框的内容需要手动处理。

修复步骤 #

1. 给每个Radio按钮设置唯一ID，让对应的Label的for属性匹配各自的ID，这样点击Label也能选中Radio，同时解决ID冲突。
2. 修改Output显示框的ID，避免和Radio的ID重复。
3. 修正calc()函数里获取选中菜单的逻辑，用document.querySelector('input[name="menu"]:checked')来获取当前选中的Radio。
4. 监听表单的Reset事件，手动清空Output显示框和总价内容。

修复后的完整代码 #

<body>
<script type="text/javascript">
function calc() {
  // 获取当前选中的radio元素
  const selectedMenu = document.querySelector('input[name="menu"]:checked');
  if (!selectedMenu) {
    document.getElementById("total").value = '';
    document.getElementById("selectedMenu").value = '';
    return;
  }
  const menuValue = selectedMenu.value;
  const amountInput = document.getElementById("numberOfPeople");
  const amount = parseInt(amountInput.value, 10);
  
  let total = 0;
  if (menuValue == "Petra") {
    total = amount < 3 ? amount * 70 : (amount >=3 && amount <7 ? amount *45 : amount*35);
  } else if (menuValue == "Andalusia") {
    total = amount <3 ? amount*80 : (amount >=3 && amount <7 ? amount*55 : amount*40);
  } else {
    total = amount <3 ? amount*90 : (amount >=3 && amount <7 ? amount*65 : amount*50);
  }    
  // 更新选中菜单的显示文本和总价
  document.getElementById("selectedMenu").value = selectedMenu.nextElementSibling.textContent;
  document.getElementById("total").value = total;  
}

// 监听表单重置事件，清空output内容
document.querySelector('form').addEventListener('reset', function() {
  // 用setTimeout确保在表单重置完成后再清空
  setTimeout(() => {
    document.getElementById("selectedMenu").value = '';
    document.getElementById("total").value = '';
  }, 0);
});
</script>
<div id="calculatePrice"></div>
Choose your menu:
<form oninput="calc();">
  <input type="radio" id="menuPetra" name="menu" value="Petra">
  <label for="menuPetra">Petra</label><br> 
  <input type="radio" id="menuAndalusia" name="menu" value="Andalusia">
  <label for="menuAndalusia">Andalusia</label><br> 
  <input type="radio" id="menu1001" name="menu" value="1001">
  <label for="menu1001">One thousand and one nights</label><br><br>

  <br>
  <label for="selectedMenu">The chosen menu was:</label><br>
  <output id="selectedMenu" name="selectedMenu"></output><br>
  <br>
  <label for="numberOfPeople">Specify the number of people:</label><br>
  <input type="number" id="numberOfPeople" name="numberOfPeople"><br><br>
  <label for="total">Total price will be:</label><br><br>
  <output class="enMoney" id="total" name="total"></output><br><br>
  <input type="reset" value="Click here to Reset and choose another menu options" 
         style="background-color: red; 
         color: white" />
</form>
</body>

关键修复说明 #

• 唯一ID：每个Radio都有独立ID，Label的for属性正确关联，解决了ID冲突，也让Label点击选中Radio的功能正常工作。
• 正确获取选中Radio：用querySelector精准定位当前选中的Radio，确保拿到正确的菜单值。
• Reset事件处理：通过监听表单的Reset事件，手动清空Output内容——因为默认Reset只处理输入控件，Output需要额外操作。
• 空值判断：在计算前先检查是否选中了菜单，如果没选就清空总价，避免出现NaN之类的错误。

内容的提问来源于stack exchange，提问作者João Pedro Alexandre