Cacher/Afficher une div avec un checkbox [Résolu/Fermé]

Signaler
Messages postés
64
Date d'inscription
lundi 20 juin 2016
Statut
Membre
Dernière intervention
21 juin 2020
-
Messages postés
64
Date d'inscription
lundi 20 juin 2016
Statut
Membre
Dernière intervention
21 juin 2020
-
Bonjour,

Je suis entrain de faire un site et je voudrais que lorsque je clique sur un checkbox du contenu s'affiche hors mon code ne fonctionne pas, Pouvez-vous m'aidez?

Merci beaucoup!!

Mon Code HTML:
<div class = "zone2" ><br> 
      <form name="formulaire">      
       <p style="color: red;">Cliquez pour vous inscrire<input id="inscrire" type="checkbox"></p>   
       <div id="cours" style="color: red" >
         
         
           <input type="checkbox" name="ubuntu"> Système d'exploitation Ubuntu (60heures) <br><br>
           <input type="checkbox" name="prog"> Fondements de la programmation (90heures)<br><br>
           <input type="checkbox" name="robot"> Robotique & Algorithmie (45heures)<br><br>
           <input type="checkbox" name="progstruct"> Programmation avec les structures de données (90heures)<br><br>
           <input type="checkbox" name="web"> Web HTML 5, CSS 3, Javascript base (60heures)<br><br>
           <input type="checkbox" name="base"> Base de données - Microsoft Access, MySQL (60heures)<br><br>
           <input type="checkbox" name="php"> Web PHP (120heures)<br><br>
           <input type="checkbox" name="Objet"> Programmation Orientée Objet avec le langage C++  (90heures)
         
       </div>
     </form>
       
    </div>
<script src="js/javascript.js" > </script>

Mon code CSS :
.zone2
{
  border-style: ridge;
  border-color: grey;
  position: relative;
  z-index: 4;
  margin-left:20px;
  width: 1000px; 
}

Mon code Javascript :
//Afficher et masquer des sections de formulaire
function preparePage()
{
 document.getElementById("inscrire").onclik = function() {
 
 if (document.formulaire.inscrire.checked){
  document.getElementById("cours").style.display ="block";
 } else{
  document.getElementById("cours").style.display ="none";
 }

 
}
document.getElementById("cours").style.display = "none";

window.onload = function (){
 preparePage();
};
 

EDIT : Ajout des balises de code

Voila!!

Configuration: Windows / Firefox 66.0

1 réponse

Messages postés
28879
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
4 juillet 2020
2 594
Bonjour,
function affichermasquer(){
 console.log("afficher/masquer");
 if (document.formulaire.inscrire.checked){
  document.getElementById("cours").style.display ="block";
 } else{
  document.getElementById("cours").style.display ="none";
 }
}

function preparePage() {
  var elm = document.getElementById("inscrire");
  elm.addEventListener('click', affichermasquer,false);
  document.getElementById("cours").style.display = "none";
}
window.onload = function (){
 preparePage();
};


1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 64506 internautes nous ont dit merci ce mois-ci

Messages postés
64
Date d'inscription
lundi 20 juin 2016
Statut
Membre
Dernière intervention
21 juin 2020

Cela fonctionne merci beaucoup ;)