Utilisation de JavaScript pour contrôler la visibilité des div en fonction de la sélection des boutons radio sans utiliser ONCLICK

Question

J'ai du code html partiellement valide. J'essaie d'afficher une saisie de texte basée sur la sélection d'un bouton radio. Comment cela fonctionne pour moi, c'est que lorsque vous appuyez sur le bouton radio, les autres options sont masquées, mais lorsque l'écran se charge pour la première fois, les 3 options apparaissent. Je suppose que c'est parce que la fonction est appelée lors d'un clic et que l'option sélectionnée du premier bouton radio ne constitue pas un clic. J'ai essayé de créer un écouteur d'événement onload qui n'apparaîtrait que lors de la première requête que j'ai faite, mais cela n'a pas fonctionné. C'est mon 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

Appelons chaque section qui doit être affichée/masquée de manière conditionnelle un « sous-formulaire ». Vous pouvez ajouter une classe CSS à chaque sous-formulaire comme :

  

    
Test 1
  

Vous pouvez ensuite introduire une règle CSS pour masquer tous les sous-formulaires sauf celui correspondant à l'option actuellement sélectionnée. Un bon moyen de suivre cette sélection afin que CSS puisse la voir est d'utiliser un attribut de données sur l'élément qui contient toutes les options (par exemple

). Votre valeur initiale déterminera quel sous-formulaire est initialement visible :

...et les styles correspondants...

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

Pour relier le tout, nous pouvons créer une fonction JS pour mettre à jour l'attribut data. Peut-être aurez-vous plusieurs ensembles de sous-formulaires sur une page (ou même dans un formulaire), il est donc utile de déterminer les sélections à mettre à jour :

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

Si vous avez besoin d'options supplémentaires, vous pouvez ajouter subform CSS 类；如果您需要多组子表单，您可以添加它们，并确保使用具有唯一 idéléments HTML supplémentaires distincts pour contenir tous les sous-formulaires.

Voir l'extrait de code complet pour un exemple fonctionnel.

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