Cacher/Afficher une div avec un checkbox

Résolu/Fermé

fa23 Messages postés 71 Date d'inscription lundi 20 juin 2016 Statut Membre Dernière intervention 10 avril 2024 - Modifié le 6 avril 2019 à 08:26
fa23 Messages postés 71 Date d'inscription lundi 20 juin 2016 Statut Membre Dernière intervention 10 avril 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:

Cacher/Afficher une div avec un checkbox
Cacher une conversation whatsapp - Guide
Afficher mot de passe wifi android - Guide
Comment cacher une application - Guide
Afficher les dossiers cachés - Guide
Comment cacher ses amis sur facebook - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38143 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 649
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();
};

fa23 Messages postés 71 Date d'inscription lundi 20 juin 2016 Statut Membre Dernière intervention 10 avril 2024
6 avril 2019 à 17:09

Cela fonctionne merci beaucoup ;)

Discussions similaires

programme qui n'affiche pas le mot secret

Cacher les membres du groupe WhatsApp

Retrouver l'image originale après avoir fait des modifications ?

Afficher toutes les lignes masquées excel

Cellules en surbrillance selon une TextBox

EDIT : Ajout des balises de code

Discussions similaires

Newsletters