Radio Button控制Div可见性：页面初始加载显示异常问题

问题描述 #

使用单选按钮控制文本输入框等内容的显示/隐藏，点击单选按钮时能正常切换隐藏其他选项，但页面首次加载时三个选项会全部显示。默认选中的第一个单选按钮不会自动触发点击事件，尝试添加onload事件监听器未成功。

原因分析 #

• 页面加载时，所有内容区块默认的display属性为block，因此全部可见
• 默认选中的单选按钮不会自动触发onclick事件，对应的显示函数未执行，无法初始化隐藏状态

解决方案 #

在页面加载完成后，手动调用默认选中单选按钮对应的显示函数，即可初始化正确的显示状态。以下是修改后的完整代码：

<% layout('layouts/boilerplate') %>
    <h1>New Part</h1>
    <form action="/parts" method="POST" novalidate class="validated-form">
        <div>
            <label class="form-label" for="partnum">Part Number</label>
            <input  class="form-control" type="text" name="part[partnum]"  id="partnum" required>
        </div>
        <div>
            <label class="form-label" for="description">Part  Description</label>
            <input class="form-control" type="text" name="part[description]"   id="description" required>
        </div>
        <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
            <input type="radio" class="btn-check" name="part[type]" id="btnradio1" value="Purchased" autocomplete="off"  onclick="show1()" checked >
            <label class="btn btn-outline-primary" for="btnradio1">Purchased</label>
          
            <input type="radio" class="btn-check" name="part[type]" id="btnradio2" value="Assembly" autocomplete="off" onclick="show2()">
            <label class="btn btn-outline-primary" for="btnradio2">Assembly</label>
          
            <input type="radio" class="btn-check" name="part[type]" id="btnradio3" value="Machined" autocomplete="off" onclick="show3()">
            <label class="btn btn-outline-primary" for="btnradio3">Machined</label>
          </div>
          <div>
            <h1 id="test1">Test 1</h1> 
          </div>
          <div>
            <h1 id="test2" >Test 2</h1>
          </div>
          <div id="machined">
            <h1 id="test3" >Test 3</h1>
            <div>
                <label class="form-label" for="material">Material</label>
                <input  class="form-control" type="text" name="part[material]"  id="material" required>
            </div>
          </div>
          <div><button>Add  Part</button></div>    
    </form>
    <a href="/parts">Back to your Parts</a>

    <script>  
function show1(){
  document.getElementById('test1').style.display ='block';
  document.getElementById('test2').style.display ='none';
  document.getElementById('machined').style.display ='none';
}
function show2(){
  document.getElementById('test1').style.display ='none';
  document.getElementById('test2').style.display ='block';
  document.getElementById('machined').style.display ='none';
}
function show3(){
  document.getElementById('test1').style.display ='none';
  document.getElementById('test2').style.display ='none';
  document.getElementById('machined').style.display ='block';
}

// 页面加载完成后初始化显示状态
document.addEventListener('DOMContentLoaded', function() {
  show1();
});
    </script>

补充说明 #

如果不想使用事件监听器，也可以直接在脚本末尾调用show1()，因为脚本放在页面底部，此时DOM元素已经加载完成，直接调用函数也能生效：

// 替换事件监听器，直接调用函数
show1();

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