Afficher div si l'une des checkbox cochée
rebk2
Messages postés
15
Statut
Membre
-
SweetRiver Messages postés 110 Statut Membre -
SweetRiver Messages postés 110 Statut Membre -
Bonjour,
dans un formulaire j'ai une liste de checkbox, une div en dessous, j'aimerai que si l'on check une ou plusieurs des checkbox de cette liste, alors la div du dessous s'affiche. Si rien n'est coché elle reste cachée.
j'ai voulu faire :
Je ne sais pas si je m'y prends bien ou mal ou meme si il n'y a pas déjà des erreurs de syntaxe... si quelqu'un pouvait me filer un coup de main codé ça serait juste merveilleux !!
Merci !!
dans un formulaire j'ai une liste de checkbox, une div en dessous, j'aimerai que si l'on check une ou plusieurs des checkbox de cette liste, alors la div du dessous s'affiche. Si rien n'est coché elle reste cachée.
j'ai voulu faire :
<li id="choix"><label>Choix: </label>
<ol class="checkboxes">
<li><input value="choix_1" type="checkbox" onclick="Change" class="checkboxlist" name="choix[]" id="choix_1" />choix 1</li>
<li><input value="choix_2" type="checkbox" onclick="Change" class="checkboxlist" name="choix[]" id="choix_2" />choix 2</li>
<li><input value="choix_3" type="checkbox" onclick="Change" class="checkboxlist" name="choix[]" id="choix_3" />choix 3</li>
</ol>
</li>
<div id="madiv" style="visibility:hidden;"><p>blabla</p></div>
<script type="text/javascript">
function Change() {
if (document.getElementById('choix_1').checked) || (document.getElementById('choix_2').checked) || (document.getElementById('choix_3').checked)
document.getElementById('madiv').style.visibility=visible;
}
else(){
document.getElementById('madiv').style.visibility=hidden;
}
}
</script>
Je ne sais pas si je m'y prends bien ou mal ou meme si il n'y a pas déjà des erreurs de syntaxe... si quelqu'un pouvait me filer un coup de main codé ça serait juste merveilleux !!
Merci !!
A voir également:
- Afficher div si l'une des checkbox cochée
- Afficher appdata - Guide
- Afficher taille dossier windows - Guide
- Div c++ - Télécharger - Langages
- Windows 11 afficher d'autres options - Guide
- Afficher mot de passe wifi android - Guide
4 réponses
Bonjour,
Il y a plusieurs erreurs de syntaxe dans le code.
Voici la version qui doit fonctionner :
@+
Il y a plusieurs erreurs de syntaxe dans le code.
Voici la version qui doit fonctionner :
<li id="choix"><label>Choix: </label>
<ol class="checkboxes">
<li><input value="choix_1" type="checkbox" onclick="Change()" class="checkboxlist" name="choix[]" id="choix_1" />choix 1</li>
<li><input value="choix_2" type="checkbox" onclick="Change()" class="checkboxlist" name="choix[]" id="choix_2" />choix 2</li>
<li><input value="choix_3" type="checkbox" onclick="Change()" class="checkboxlist" name="choix[]" id="choix_3" />choix 3</li>
</ol>
</li>
<div id="madiv" style="visibility:hidden;"><p>blabla</p></div>
<script type="text/javascript">
function Change() {
if ((document.getElementById('choix_1').checked) || (document.getElementById('choix_2').checked) || (document.getElementById('choix_3').checked)) {
document.getElementById('madiv').style.visibility="visible";
}
else {
document.getElementById('madiv').style.visibility="hidden";
}
}
</script>
@+
Et saurais tu par quoi remplacer hidden pour que ma div lorsqu'elle est cachée soit vraiment caché car là le contenu n'apparait pas mais la place qu'elle prend reste...
Merci.
Il faut utiliser le couple
Ce qui donne :
@+
Il faut utiliser le couple
block/noneavec la propriété
display.
Ce qui donne :
<li id="choix"><label>Choix: </label>
<ol class="checkboxes">
<li><input value="choix_1" type="checkbox" onclick="Change()" class="checkboxlist" name="choix[]" id="choix_1" />choix 1</li>
<li><input value="choix_2" type="checkbox" onclick="Change()" class="checkboxlist" name="choix[]" id="choix_2" />choix 2</li>
<li><input value="choix_3" type="checkbox" onclick="Change()" class="checkboxlist" name="choix[]" id="choix_3" />choix 3</li>
</ol>
</li>
<div id="madiv" style="display:none"><p>blabla</p></div>
<script type="text/javascript">
function Change() {
if ((document.getElementById('choix_1').checked) || (document.getElementById('choix_2').checked) || (document.getElementById('choix_3').checked)) {
document.getElementById('madiv').style.display="block";
}
else {
document.getElementById('madiv').style.display="none";
}
}
</script>
@+