Cacher un element en fonction d'un radiobutton

Cacher un element en fonction d'un radiobutton - HTML/CSS - Programmation

Marsh Posté le 29-05-2024 à 22:09:39    

Bonjour,
 
j'espère poster dans la bonne catégorie.
 
Je suis entrain de faire une page HTML qui contient 2 radiobutton.
Je voudrais cacher un input et afficher l'autre si le radiobutton1 est cliqué et inversement.
 
Quelqu'un peut-il me dire comment faire ?
 
Merci.
 

Code :
  1. <div class="row"> 
  2.                         <p>La récupération de la consommation de la maison se fait via : </p>
  3.                         <div class="form-check">
  4.                             <input class="form-check-input" type="radio" name="flexRadioPowerMaison" id="flexRadioHA1">
  5.                             <label class="form-check-label" for="flexRadioHA1">
  6.                               Home Assistant
  7.                             </label>
  8.                           </div>
  9.                           <div class="form-check">
  10.                             <input class="form-check-input" type="radio" name="flexRadioPowerMaison" id="flexRadioShelly1" checked>
  11.                             <label class="form-check-label" for="flexRadioShelly1">
  12.                               Shelly
  13.                             </label>
  14.                           </div>
  16. <div class="col-md-12 col-lg-6">
  17.                      
  18.                         <div class="input-group my-3" id="IPShelly1">
  19.                           <span class="input-group-text col-8" >IP du Shelly 1 (conso maison)</span>
  20.                           <input required pattern="^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$" type="text" class="form-control mr-3 col-4" id="IPShelly1" placeholder="192.168.1.XXX" aria-describedby="IPShelly1">
  21.                         </div>
  22.                                            
  23.                       <div class="input-group my-3" id="IPHA" >
  24.                         <span class="input-group-text col-8" >IP de Home Assistant</span>
  25.                         <input required pattern="^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$" type="text" class="form-control mr-3 col-4" id="IPHA" placeholder="192.168.1.XXX" aria-describedby="IPHA">
  26.                       </div>
  27.                      </div>


---------------
Matheux Fou - https://afficheur-tempo.fr - TEMPO BOX pour abonnés TEMPO EDF
Reply

Marsh Posté le 29-05-2024 à 22:09:39   

Reply

Marsh Posté le 29-05-2024 à 23:32:34    

Tu as des solutions pure css mais il faut que le bloc a caché / découvrir soit placé au niveau html juste après l'input checkbox, comme ici par exemple :

Code :
  1. <style>
  2. input[type=checkbox]{
  3.     display: none;
  4. }
  5. input[type=checkbox]:checked ~ .remove-check{
  6.     display: none;
  7. }
  8. input[type=checkbox]:checked ~ #email{
  9.     display: block;
  10. }
  11. #email{
  12.     display: none;
  13. }
  14. </style>
  15. <label for="reveal-email" class="btn" style="width: 300px"> Sign Up</label>
  16. <input type="checkbox" id="reveal-email" role="button">
  17. <div id="email">
  18.     <form id="email-form" class="nice" action="" method="post">
  19.         <input class="input-text required email" type="text" name="EMAIL" id="id_email" placeholder="Email" />
  20.         <input type="hidden" name="name" id="id_name_email">
  21.         <a class="btn" >Apply</a>
  22.     </form>
  23. </div>


Source  : https://jsfiddle.net/nzcage/nvrgbj5q/
 
Sinon en JS avec ou sans Framework avec un listener sur l'input checkbox et des modification de display sur l'id ciblé comme ici :

Code :
  1. <script>
  2.     function showMe (box) {
  3.         var chboxs = document.getElementsByName("c1" );
  4.         var vis = "none";
  5.         for(var i=0;i<chboxs.length;i++) {
  6.             if(chboxs[i].checked){
  7.              vis = "block";
  8.                 break;
  9.             }
  10.         }
  11.         document.getElementById(box).style.display = vis;
  12.     }
  13. </script>
  14. <div id="div1" style="display:none">
  15. <table border=1 id="t1">
  16. <tr>
  17. <td>i am here!</td>
  18. </tr>
  19. </table>
  20. </div>
  21. <form>
  22. <input type="checkbox" name="c1" onclick="showMe('div1')">Show Hide Checkbox
  23. </form>


Source  : https://jsfiddle.net/mithunsatheesh/wwcRr/


---------------
D3
Reply

Marsh Posté le 30-05-2024 à 15:07:49    

EDIT : mon premier message n'a pas été validé.
merci pour ton aide le code fonctionne bien.
 
En revanche, après essai j'ai un truc que je ne comprends pas.
 
Lorsque je lance le fichier les 2 input sont bien côte à côte
 
https://ibb.co/9cbPLkS
 
Je clique sur Home assistant : j'ai bien les 3 input qui apparaissent
 
https://ibb.co/9h9Rtkr
 
Si j'appuie de nouveau sur Shelly : les 2 input ne sont plus côte à côte !!!
 
https://ibb.co/zrnCSDr
 
Voici mon code source
 

Code :
  1. <body id="page-top">
  2. <!-- Page Wrapper -->
  3. <div id="wrapper">
  4.  
  5.     <!-- Sidebar -->
  6.   <ul class="navbar-nav bg-gradient-success sidebar sidebar-dark accordion" id="accordionSidebar">
  7.     <!-- Sidebar - Brand -->
  8.     <a class="sidebar-brand d-flex align-items-center justify-content-center" href="/">
  9.       <div class="sidebar-brand-icon">
  10.         <i class="bi bi-sun"></i>
  11.       </div>
  13.       <div class="sidebar-brand-text mx-3">Routeur Solaire</div>
  14.     </a>
  15.     <!-- Divider -->
  17.     <hr class="sidebar-divider my-0">
  18.       <!-- Nav Item - Dashboard -->
  19.       <li class="nav-item active">
  20.           <a class="nav-link" href="/">
  21.               <h6 class="font-weight-bold"><i class="fas fa-fw fa-tachometer-alt"></i> Tableau de bord</h6>
  22.           </a>
  23.       </li>
  24.    </ul>
  26. <div id="content-wrapper" class="d-flex flex-column">
  27. <!-- Begin Page Content -->
  28.   <div class="container-fluid">
  29.   <!-- Page Heading -->
  30.     <div class="d-sm-flex align-items-center justify-content-between mb-4">
  31.       <h1 class="h3 mb-0 text-gray-800">Configuration du Système</h1>
  32.     </div> 
  33.              
  34.     <p class="mb-4">Page de configuration du Routeur Solaire; Pensez à sauvegarder votre configuration après l'avoir appliquée.</p>
  35.      
  36.     <div class="col-xl-12 col-xxl-12">
  37.     <!-- Entete Cadre CONFIGURATION -->
  38.       <div class="card position-relative">
  39.         <div class="card-header py-3">
  40.           <h6 class="m-0 font-weight-bold text-primary">Configuration</h6>
  41.             <span id="saveform"></span>
  42.         </div>
  43.         <div class="card-body  shadow">
  44.           <div class="col col-12">
  45.             <form class="user" id="formulaire" method="post" action=""  >
  46.               <div class="container text-start">
  47.                
  48.                 <div class="row"> 
  49.                   <p>La récupération de la consommation de la maison se fait via : </p>
  50.                 </div>
  51.                 <div class="row"> 
  52.                   <div class="form-check">
  53.                     <input class="form-check-input" type="radio" style="margin-right:10px;" name="flexRadioConsoMaison" id="flexRadioConsoMaisonHA" onclick="DisplayInputConsoMaison()">
  54.                     <label class="form-check-label" style="margin-right:10px;" for="flexRadioConsoMaisonHA">Home Assistant</label>
  55.                   </div>
  56.                   <div class="form-check">
  57.                     <input class="form-check-input" type="radio"  style="margin-right:10px;" name="flexRadioConsoMaison" id="flexRadioConsoMaisonShelly" onclick="DisplayInputConsoMaison()" checked >
  58.                     <label class="form-check-label" for="flexRadioConsoMaisonShelly" style="margin-right:10px;">Shelly</label>
  59.                   </div>
  60.                 </div>
  61.            <!--       ligne pour SHELLY   -->
  62.                 <div class="row"  id="SHELLY_Input" >
  63.                   <div class="col-md-12 col-lg-6">
  64.                     <div class="input-group my-3" >
  65.                       <span class="input-group-text col-8" >IP du Shelly 1 (conso maison)</span>
  66.                       <input pattern="^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$" type="text" class="form-control mr-3 col-4" id="IPShelly1" placeholder="192.168.1.XXX" aria-describedby="IPShelly1">
  67.                     </div>
  68.                   </div>
  69.                   <div class="col-md-12 col-lg-6">
  70.                     <div class="input-group my-3" id="IPShelly1">
  71.                       <span class="input-group-text col-8" >emeter</span>
  72.                        <input type="text" class="form-control mr-3 col-4" id="EmeterShelly1" placeholder="0" aria-describedby="IPShelly1">
  73.                     </div>
  74.                   </div>
  75.                 </div>
  76.              
  77.                 <!--       ligne pour HOME ASSISTANT   -->
  78.                
  79.                 <div class="row" id="HA_Input" style="display:none">
  80.                   <div class="col-md-6 col-sm-12">
  81.                     <div class="input-group my-3" id="IPHA" >
  82.                       <span class="input-group-text col-8" >IP de Home Assistant</span>
  83.                       <input pattern="^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$" type="text" class="form-control mr-3 col-4" id="IPHA" placeholder="192.168.1.XXX" aria-describedby="IPHA">
  84.                     </div>
  85.                   </div>
  86.                   <div class="col-md-6 col-sm-12">
  87.                     <div class="input-group my-3" id="HASensor" >
  88.                       <span class="input-group-text col-8" >Nom du sensor</span>
  89.                       <input type="text" class="form-control mr-3 col-4" id="HASensor" placeholder="" aria-describedby="HASensor">
  90.                     </div>
  91.                   </div>
  92.                   <div class="col-md-6 col-sm-12"> 
  93.                     <div class="input-group my-3" id="HABearer" >
  94.                       <span class="input-group-text col-8" >Bearer HA</span>
  95.                       <input type="text" class="form-control mr-3 col-4" id="HABearer" placeholder="" aria-describedby="HABearer">
  96.                     </div>
  97.                    </div>
  98.                 </div>
  100.                  <!--       ligne pour SHELLY 2   -->   
  101.                 <div class="row">
  102.                   <div class="col-md-12 col-lg-6">
  103.                     <div class="input-group my-3" id="IPShelly2">
  104.                       <span class="input-group-text col-8" >IP du Shelly 2 (conso CE)</span>
  105.                       <input pattern="^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$" type="text" class="form-control mr-3 col-4" id="IPShelly2" placeholder="192.168.1.XXX" aria-describedby="IPShelly2">
  106.                     </div>
  107.                   </div>
  108.                   <div class="col-md-12 col-lg-6">
  109.                     <div class="input-group my-3" id="IPShelly1">
  110.                       <span class="input-group-text col-8" >emeter</span>
  111.                       <input type="text" class="form-control mr-3 col-4" id="EmeterShelly2" placeholder="1" aria-describedby="IPShelly1">
  112.                     </div>
  113.                   </div>
  114.                 </div>
  115.                
  116.                
  117.                 <input type="submit" value=" Application des parametres" class="btn btn-success btn-user btn-block col-4 mx-auto shadow h-100">
  118.                
  119.               </div>
  120.          
  121.              
  122.             </form>
  123.           </div> <!-- col col-12-->
  124.         </div><!-- class="card-body" -->
  125.       </div><!-- card position-relative -->
  126.     </div> <!--class="col-xl-12 col-xxl-12" -->
  127.    
  128.     <div class="col-lg-4 my-2 mx-auto">
  129.       <div class="card border-left-success shadow h-100 py-2">
  130.         <div class="card-body">
  131.           <div class="row no-gutters align-items-center">
  132.             <div class="col mr-2">
  133.             <!--<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Sauvegarder</div>
  134.               -->
  135.               <div class="h5 mb-0 font-weight-bold text-gray-800"><span id="save"   ><a href="#">SAUVEGARDER</a></span><br><span id="savemsg"></span>
  136.               </div>
  137.             </div>
  138.             <div class="col-auto">
  139.               <i class="fas fa-download fa-2x text-gray-300"></i>
  140.             </div>
  141.           </div>
  142.         </div>
  143.       </div>
  144.     </div>
  145.   </div> <!--class="container-fluid" -->
  146. </div> <!--<div id="content"> -->   
  147. </div>
  148.        
  150.     <script type='text/javascript'>
  151.     function DisplayInputConsoMaison () {
  152.       var chboxs = document.getElementsByName("flexRadioConsoMaison" );
  153.         if ( chboxs[0].checked) {
  154.           document.getElementById('HA_Input').style.display = "block";
  155.           document.getElementById('SHELLY_Input').style.display = "none";
  156.           }
  157.         if ( chboxs[1].checked) {
  158.           document.getElementById('HA_Input').style.display = "none";
  159.           document.getElementById('SHELLY_Input').style.display = "block";
  160.           }
  161.    
  162.    
  163.    
  164.     }
  167.     </script>
  168.    
  169.    
  172.    </body>


Message édité par davidmarli le 30-05-2024 à 15:40:40

---------------
Matheux Fou - https://afficheur-tempo.fr - TEMPO BOX pour abonnés TEMPO EDF
Reply

Marsh Posté le 30-05-2024 à 16:04:38    

Le type d'un bloc div est par défaut block mais vu que tu utilises manifestement un framework qui te fait un colonage il se peut que ce soit flex ou inline-block.
 
Il se peut que son statut de block ou flex dépendent aussi de la résolution de ton dispositif de visualisation (un smartphone mettre surement tes colonnes les une au dessus des autres et donc tu seras probablement en display:block & width:100%).
 
Essaye d'inspecter ton élement à l'aide du clic droit de ton navigateur pour voir son style par défaut...
https://www.google.com/search?q=inspecter+l'element


---------------
D3
Reply

Marsh Posté le 30-05-2024 à 16:12:17    

bien vu avec "flex" ça marche !
 
Quand on n'y connait rien, on perd vite son temps pour pas grand chose.
 
Encore merci pour ton aide.

Message cité 1 fois

---------------
Matheux Fou - https://afficheur-tempo.fr - TEMPO BOX pour abonnés TEMPO EDF
Reply

Marsh Posté le 30-05-2024 à 16:56:37    

davidmarli a écrit :

bien vu avec "flex" ça marche !


Tu devrais stocker la valeur initial avant ton code de modification car il se peut que sa valeur dépendent de ta résolution d'affichage.
Un truc du genre :

Code :
  1. <script type='text/javascript'>
  2. var original_display = document.getElementById('HA_Input').style.display;
  3.     function DisplayInputConsoMaison () {
  4.       var chboxs = document.getElementsByName("flexRadioConsoMaison" );
  5.         if ( chboxs[0].checked) {
  6.           document.getElementById('HA_Input').style.display = original_display;
  7.           document.getElementById('SHELLY_Input').style.display = "none";
  8.           }
  9.         if ( chboxs[1].checked) {
  10.           document.getElementById('HA_Input').style.display = ;
  11.           document.getElementById('SHELLY_Input').style.display = original_display;
  12.           }
  13.     }
  14. </script>


Après y'aurait pas mal de chose à améliorer dans ton code mais du moment que ça fonctionne... [:nedurb]  

davidmarli a écrit :

Quand on n'y connait rien, on perd vite son temps pour pas grand chose.


C'est sur. :o  

davidmarli a écrit :

Encore merci pour ton aide.


De rien :hello:


Message édité par mechkurt le 30-05-2024 à 19:31:21

---------------
D3
Reply

Marsh Posté le 30-05-2024 à 19:13:44    

je me doute bien que des spécialistes du html/bootstrap/javascript doivent avoir des sueurs froides en voyant mon code...
Mais chacun son métier.
J'essaye de faire du mieux que je peux.
 
Bon maintenant il faut que je m'attèle à la récupération des données à afficher sur l'HTML en piochant dans mes fichiers de config avec les submit des forms ....


Message édité par davidmarli le 30-05-2024 à 19:15:00

---------------
Matheux Fou - https://afficheur-tempo.fr - TEMPO BOX pour abonnés TEMPO EDF
Reply

Marsh Posté le 30-05-2024 à 19:45:48    

Tient nous au jus, y'a ptet une API interrogeable, voir même des projets déjà développé...


---------------
D3
Reply

Marsh Posté le 30-05-2024 à 20:20:43    

pour ça, ça devrait aller, c'est pas la première fois que je programme ce genre de truc.
Mon programme renvoie une chaine de caractères avec les éléments dont j'ai besoin et je parse dans le doc HTML en attribuant les innerHTML  
 
Mais je n'hésiterai pas si j'ai besoin.
 


---------------
Matheux Fou - https://afficheur-tempo.fr - TEMPO BOX pour abonnés TEMPO EDF
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed