使用 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