基于单选按钮选择显隐输入字段的JS代码站点运行异常求解

问题原因 #

• 外部JS文件加载异常：你把ageCheck函数放在/assets/js/main.js中，部署后如果该文件路径错误、未上传成功，或者代码执行时机早于DOM加载完成，都会导致点击单选按钮时找不到对应函数，触发无响应的问题。
• 行内点击事件写法不规范：单选按钮onclick属性里多余的javascript:前缀，可能在部分浏览器环境下导致事件执行失败。
• 隐藏字段必填校验冲突：你当前的代码没有处理隐藏输入组的required属性，即使字段隐藏，浏览器提交表单时依然会校验隐藏组的必填字段，导致表单无法正常提交。

修正方案 #

1. 调整HTML代码（推荐） #

删除行内onclick属性，直接把JS逻辑写在页面底部，避免外部文件加载失败的问题，同时新增必填校验的动态切换逻辑：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8" />
</head>
<body >
<div>
  <form method="post" name="childDetails" action="example.php">
    <div class="radioB">
      <div class="a">
        <input type="radio" id="below" name="age" >
        <label for="below">Age of my child is below 4 years.</label>
      </div>
      <div class="a">
        <input type="radio" id="above" name="age" >
        <label for="above">Age of my child is above 4 years.</label>
      </div>                                    
    </div> 
    <div id="ifBelow" class="set-1" style="display: none">
      <div>
        <input type="number" id="dob" name="dob" placeholder="DOB of Child in mmddyy" required />
      </div>                                        
      <div>
        <input type="text" id="name" name="name" placeholder="Name of the child" required />
      </div>
      <div>
        <input type="email" id="email" name="email" placeholder="Your email" />
      </div>
    </div>
    <div id="ifAbove" class="set-2" style="display: none">
      <div>
        <input type="number" id="age" name="age" placeholder="Age of your child" required />
      </div>    
      <div>
        <input type="text" id="name2" name="name2" placeholder="Name of the child" required />
      </div>
      <div>
        <input type="text" id="hobby" name="hobby" placeholder="Hobby of your child" required />
      </div>
      <div>
        <input type="email" id="email-2" name="email-2" placeholder="Your email" />
      </div>
    </div>
    <div id="ifChecked" class="set-3" style="display: none">
      <div class="set-3">
        <input type="checkbox" id="proud" name="proud" required>
        <label for="proud">I am a proud parent.</label>
      </div>                                    
      <div>
        <input type="submit" name="submit" value="Submit" class="primary" />
      </div>
    </div>
  </form>
</div>
<script>
function ageCheck() {
    const belowSet = document.getElementById('ifBelow');
    const aboveSet = document.getElementById('ifAbove');
    const submitSet = document.getElementById('ifChecked');
    const belowRequired = belowSet.querySelectorAll('[required]');
    const aboveRequired = aboveSet.querySelectorAll('[required]');

    if (document.getElementById('below').checked) {
        belowSet.style.display = 'block';
        aboveSet.style.display = 'none';
        submitSet.style.display = 'block';
        // 开启当前组必填校验，关闭另一组必填校验
        belowRequired.forEach(el => el.required = true);
        aboveRequired.forEach(el => el.required = false);
    } else if (document.getElementById('above').checked) {
        belowSet.style.display = 'none';
        aboveSet.style.display = 'block';
        submitSet.style.display = 'block';
        // 开启当前组必填校验，关闭另一组必填校验
        belowRequired.forEach(el => el.required = false);
        aboveRequired.forEach(el => el.required = true);
    } else {
        aboveSet.style.display = 'none';
        belowSet.style.display = 'none';
        submitSet.style.display = 'none';
        belowRequired.forEach(el => el.required = false);
        aboveRequired.forEach(el => el.required = false);
    }
}
// 绑定单选按钮切换事件
document.querySelectorAll('input[name="age"]').forEach(radio => {
    radio.addEventListener('change', ageCheck);
});
// 页面加载时初始化状态
ageCheck();
</script>
</body>
</html>

2. 保留外部JS的修正写法 #

如果需要把JS逻辑放在/assets/js/main.js里，需要确认文件路径正确，同时把所有代码包裹在DOM加载完成的回调中，避免找不到元素：

document.addEventListener('DOMContentLoaded', function() {
    function ageCheck() {
        // 把上面ageCheck的逻辑复制到这里
    }
    document.querySelectorAll('input[name="age"]').forEach(radio => {
        radio.addEventListener('change', ageCheck);
    });
    ageCheck();
});

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