使用 JavaScript 基于单选按钮选择来控制 div 可见性，而不使用 ONCLICK

Question

我有一些部分有效的 html 代码。我试图根据单选按钮选择显示一些文本输入。我的工作原理是，当按下单选按钮时，它会隐藏其他选项，但在屏幕第一次加载时，所有 3 个选项都会显示。我假设它是因为单击时调用该函数并且第一个单选按钮的选中选项不构成单击。我尝试制作一个 onload 事件侦听器，该监听器只会在我第一次请求的状态下显示，但这不起作用。 这是我的代码

<% 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';
}
  
    </script>

Answer 1

让我们将需要有条件显示/隐藏的每个部分称为“子表单”。您可以为每个子表单添加一个 CSS 类，例如：

  

    
Test 1
  

然后，您可以引入 CSS 规则来隐藏除与当前所选选项对应的子表单之外的所有子表单。跟踪该选择以便 CSS 可以看到它的一个好方法是作为包含所有选项的元素（例如

）上的数据属性。您的初始值将决定最初可见的子表单：

...以及相应的样式...

/* Hide .subform1 unless it's currently selected */
.subform1 { display: none; }
.subform-group[data-selection="1"] .subform1 { display: block; }

为了将它们结合在一起，我们可以创建一个 JS 函数来更新数据属性。也许您会在一个页面上（甚至在一个表单内）拥有多组子表单，因此确定要更新的选择非常有用：

    function show(subformGroupId, selection) {
      document.getElementById(subformGroupId).setAttribute("data-selection", selection);
    }

如果您需要额外的选项，您可以添加额外的 subform CSS 类；如果您需要多组子表单，您可以添加它们，并确保使用具有唯一 id 的单独 HTML 元素来包含所有子表单。

请参阅完整的代码片段以获取工作示例。

function show(subformGroupId, selection) {
  document.getElementById(subformGroupId).setAttribute("data-selection", selection);
}

.subform1,
.subform2,
.subform3,
.subform4  /* add extra subforms as needed ... */
{
  display: none;  /* Hide all forms by default */
}

.subform-group[data-selection="1"] .subform1,
.subform-group[data-selection="2"] .subform2,
.subform-group[data-selection="3"] .subform3,
.subform-group[data-selection="4"] .subform4  /* add extra subforms as needed ... */
{
  display: block;  /* Display the form matching the selected option */
}

New Part

Part Number

Part Description

Purchased Assembly Machined

Test 1

Test 2

Test 3

Material

Add Part

Back to your Parts