点击radio单选按钮控制HTML元素显隐功能失效求助

问题排查与修复方案 #

存在的2个核心问题 #

• 语法错误：tripCheck函数缺少结束的右花括号}，导致浏览器无法正常解析执行该JS函数，所以点击单选按钮无任何响应。
• 业务逻辑写反：当前代码判断「往返单选框选中时隐藏返程日期区块」，和实际需求完全相反，往返场景需要展示返程日期，单程场景才需要隐藏。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<script>
function tripCheck(){
    if (document.getElementById('round').checked){
        // 往返选中，展示返程日期区块
        document.getElementById('toggle').style.display = 'block';
    } else {
        // 单程选中，隐藏返程日期区块
        document.getElementById('toggle').style.display = 'none';
    }
}
// 页面加载完成后自动执行一次，保证初始状态正确
window.onload = tripCheck;
</script> 
</head>
<body>
<form action="/post" method="POST">

<!-- Radio Buttons -->
 <input type="radio" onclick="tripCheck();" name="oneround" id="round" checked>往返
 <input type="radio" onclick="tripCheck();" name="oneround" id="oneway">单程<br>

<!-- 出发到达机场输入区 -->
  <input type="text" name = "source" placeholder="请输入出发机场" required/>
  <input type="text" name = "dest" placeholder="请输入到达机场" required/><br>

<!-- 日期选择区 -->
出发日期:
  <input type="date" id="departure" name="ddate"
       value="mm/dd/yyyy" min="2000-01-01" max="2050-01-01" required>
  <div id="toggle">返程日期:
  <input type="date" id="return" name="rdate"
       value="mm/dd/yyyy" min="2000-01-01" max="2050-01-01"> 
  </div>

<!-- 提交按钮 -->
  <br>
  <input type="submit" value="查询航班">
  
</form>
</body> 
</html>

优化说明 #

原代码中onclick绑定的javascript:前缀属于冗余写法，直接写函数名即可正常调用。新增的window.onload = tripCheck可以保证页面刚打开时，返程区块的显示状态和默认选中的「往返」单选框状态匹配，避免出现初始状态不一致的问题。

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