Menggunakan JavaScript untuk mengawal keterlihatan div berdasarkan pemilihan butang radio tanpa menggunakan ONCLICK

Question

Saya mempunyai beberapa kod html separa sah. Saya cuba memaparkan beberapa input teks berdasarkan pemilihan butang radio. Cara ia berfungsi untuk saya ialah apabila butang radio ditekan, ia menyembunyikan pilihan lain, tetapi apabila skrin mula-mula dimuatkan, kesemua 3 pilihan muncul. Saya mengandaikan ia kerana fungsi itu dipanggil pada klik dan pilihan yang dipilih bagi butang radio pertama tidak membentuk satu klik. Saya cuba membuat pendengar acara onload yang hanya akan muncul pada permintaan pertama yang saya buat, tetapi itu tidak berjaya. Ini kod saya

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

Mari kita panggil setiap bahagian yang perlu ditunjukkan/disembunyikan secara bersyarat sebagai "subborang". Anda boleh menambah kelas CSS pada setiap subborang seperti:

  

    
Test 1
  

Anda kemudian boleh memperkenalkan peraturan CSS untuk menyembunyikan semua subborang kecuali yang sepadan dengan pilihan yang sedang dipilih. Cara yang baik untuk menjejaki pilihan ini supaya CSS dapat melihatnya ialah sebagai atribut data pada elemen yang mengandungi semua pilihan (cth.

). Nilai awal anda akan menentukan subbentuk yang pada mulanya kelihatan:

...dan gaya yang sepadan...

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

Untuk mengikat semuanya bersama-sama, kita boleh mencipta fungsi JS untuk mengemas kini atribut data. Mungkin anda akan mempunyai beberapa set subborang pada halaman (atau bahkan dalam borang), jadi adalah berguna untuk menentukan pilihan yang ingin dikemas kini:

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

Jika anda memerlukan pilihan tambahan, anda boleh menambah tambahan subform CSS 类；如果您需要多组子表单，您可以添加它们，并确保使用具有唯一 id elemen HTML berasingan untuk mengandungi semua subbentuk.

Lihat coretan kod lengkap untuk contoh yang berkesan.

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