Cacher/Afficher une div avec un checkbox
Résolu
fa23
Messages postés
94
Date d'inscription
Statut
Membre
Dernière intervention
-
fa23 Messages postés 94 Date d'inscription Statut Membre Dernière intervention -
fa23 Messages postés 94 Date d'inscription Statut Membre Dernière intervention -
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:
Mon code CSS :
Mon code Javascript :
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
-
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(); };
