Menu

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

Messages postés
9
Date d'inscription
lundi 20 juin 2016
Statut
Membre
Dernière intervention
6 avril 2019
-
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
Afficher la suite 

Votre réponse

1 réponse

Meilleure réponse
Messages postés
25232
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 avril 2019
1949
1
Merci
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();
};


Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM 40516 internautes nous ont dit merci ce mois-ci

fa23
Messages postés
9
Date d'inscription
lundi 20 juin 2016
Statut
Membre
Dernière intervention
6 avril 2019
-
Cela fonctionne merci beaucoup ;)
Commenter la réponse de jordane45