Cacher/Afficher une div avec un checkbox

Résolu/Fermé
fa23 Messages postés 82 Date d'inscription lundi 20 juin 2016 Statut Membre Dernière intervention 21 octobre 2024 - Modifié le 6 avril 2019 à 08:26
fa23 Messages postés 82 Date d'inscription lundi 20 juin 2016 Statut Membre Dernière intervention 21 octobre 2024 - 6 avril 2019 à 17:09
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
A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38469 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 avril 2025 4 741
6 avril 2019 à 08:34
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
fa23 Messages postés 82 Date d'inscription lundi 20 juin 2016 Statut Membre Dernière intervention 21 octobre 2024
6 avril 2019 à 17:09
Cela fonctionne merci beaucoup ;)
0

Discussions similaires

additionner nombres dans cellules avec texte
kawimaki -
kawimaki -

Bonjour à tous,
Je vous contacte car je n'ai pas trouvé la solution à mon problème.
J'ai vu des posts qui s'en rapprochaient mais pas réussi à mettre en œuvre :/

J'ai deux colonnes contenant texte et chiffres et souhaite "simplement" additionner les chiffres afin de contrôler si les totaux sont bons.
Voilà ce que j'ai :
Existe [3] N'existe pas [223]
Existe [185] N'existe pas [41]
Existe [10] N'existe pas [216]
Existe [21] N'existe pas [205]
Existe [6] N'existe pas [220]
Existe [6] N'existe pas [220]
Existe [1] N'existe pas [225]
Existe [1] N'existe pas [225]
Existe [1] N'existe pas [225]

6 réponses