如何通过if语句在提交后检测单选框值，实现LED状态提示

嘿，我看了你的代码，发现几个小细节导致功能没按预期工作，我来帮你调整好，顺便解释下问题出在哪：

原代码的问题点 #

• 你直接获取了两个单选框的value，但单选框的value是固定的，不管是否选中都会返回设定的值，应该检查它们的checked属性来判断哪个被选中了
• 用按钮的onclick处理提交不如用表单的onsubmit事件可靠，毕竟表单还可能通过回车键提交

修正后的完整代码 #

<form action="url" method="POST" onsubmit="return checkInput()">
  Allumer la LED D7 <br> <br>
  <input type="radio" name="arg" value="on" id="on">On. <br>
  <input type="radio" name="arg" value="off" id="off">Off. <br> <br>
  <input type="submit" value="OK"> <br>
</form>
<p id="reponse"></p>

<script>
function checkInput() {
  // 获取两个单选框元素
  const onRadio = document.getElementById("on");
  const offRadio = document.getElementById("off");

  // 检查哪个单选框被选中
  if (onRadio.checked) {
    document.getElementById('reponse').textContent = "LED EST ON";
  } else if (offRadio.checked) {
    document.getElementById('reponse').textContent = "LED EST Off";
  }
  
  // 返回false阻止表单默认提交行为，避免页面跳转
  return false;
}
</script>

关键修改说明 #

1. 表单事件绑定：把提交逻辑绑定到表单的onsubmit事件，并返回checkInput()的结果，这样不管是点击按钮还是回车提交，逻辑都会触发，同时返回false能阻止表单默认的跳转行为
2. 判断选中状态：通过checked属性判断哪个单选框被选中，这是单选框判断选中状态的正确方式
3. 文本设置：用textContent替代innerHTML，如果只是设置纯文本，textContent更安全也更高效

这样修改后，选中“On”提交就会显示LED EST ON，选中“Off”提交就会显示LED EST Off啦～

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