Afficher div si l'une des checkbox cochée

Fermé
rebk2 Messages postés 15 Date d'inscription samedi 5 janvier 2013 Statut Membre Dernière intervention 28 mars 2020 - 22 juin 2013 à 11:38
SweetRiver Messages postés 103 Date d'inscription jeudi 4 août 2011 Statut Membre Dernière intervention 22 novembre 2016 - 23 juin 2013 à 13:28
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 :
 <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 !!

4 réponses

SweetRiver Messages postés 103 Date d'inscription jeudi 4 août 2011 Statut Membre Dernière intervention 22 novembre 2016 6
22 juin 2013 à 12:19
Bonjour,

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>


@+
6
rebk2 Messages postés 15 Date d'inscription samedi 5 janvier 2013 Statut Membre Dernière intervention 28 mars 2020 1
22 juin 2013 à 20:42
OMG jsuis con parfois, merci beaucoup !!
1
SweetRiver Messages postés 103 Date d'inscription jeudi 4 août 2011 Statut Membre Dernière intervention 22 novembre 2016 6
Modifié par SweetRiver le 23/06/2013 à 13:28
Tant mieux si tout fonctionne.

Il n'y a pas de question(s) idiote(s) !

@+

Peux-tu juste mettre le sujet en "résolu" ?
0
rebk2 Messages postés 15 Date d'inscription samedi 5 janvier 2013 Statut Membre Dernière intervention 28 mars 2020 1
22 juin 2013 à 14:22
Merci beaucoup !!!
0
rebk2 Messages postés 15 Date d'inscription samedi 5 janvier 2013 Statut Membre Dernière intervention 28 mars 2020 1
22 juin 2013 à 14:29
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...
0
SweetRiver Messages postés 103 Date d'inscription jeudi 4 août 2011 Statut Membre Dernière intervention 22 novembre 2016 6
22 juin 2013 à 17:23
Merci.

Il faut utiliser le couple
block/none
avec 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>

@+
0