Verwenden von JavaScript zur Steuerung der Div-Sichtbarkeit basierend auf der Auswahl von Optionsfeldern ohne Verwendung von ONCLICK

Question

Ich habe teilweise gültigen HTML-Code. Ich versuche, eine Texteingabe basierend auf der Auswahl von Optionsfeldern anzuzeigen. Bei mir funktioniert es so, dass beim Drücken des Optionsfelds die anderen Optionen ausgeblendet werden, beim ersten Laden des Bildschirms jedoch alle drei Optionen angezeigt werden. Ich gehe davon aus, dass es daran liegt, dass die Funktion beim Klicken aufgerufen wird und die ausgewählte Option des ersten Optionsfelds keinen Klick darstellt. Ich habe versucht, einen Onload-Ereignis-Listener zu erstellen, der nur bei der ersten von mir gestellten Anfrage angezeigt wird, aber das hat nicht funktioniert. Das ist mein Code

<% 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