Display sur Div en cochant une checkbox

Bonjour .

j'ai 10 checkbox .
Lorsqu'on coche une des checkbox , une description apparait.
Si on coche une autre checkbox , une autre description apparait ..

Pour cela j'utilise le code suivant :

	<script language="javascript">
function toggle(divId) {
	var divArray = document.getElementsByTagName("div");
	for(i = 0; i < divArray.length; i++){
		if(divArray[i].id == divId){
			if(divArray[i].style.display != 'none'){
				divArray[i].style.display = 'none';
			}else{
				divArray[i].style.display = '';
			}
		}
	}
}
</script>

<div id="descr0" class="mine" style="display:none">description 0 </div>
<div id="descr1" class="mine" style="display:none">Description 1 </div>
<div id="descr2" class="mine" style="display:none">Description 2 </div>
<div id="descr3" class="mine" style="display:none">Description 3 </div>
<div id="descr4" class="mine" style="display:none">Description 4 </div>
<div id="descr5" class="mine" style="display:none">Description 5 </div>

    <input type='checkbox' id='bouton0' onClick="toggle('descr0');" />
    <input type='checkbox' id='bouton1' onClick="toggle('descr1');" />
    <input type='checkbox' id='bouton2' onClick="toggle('descr2');" />
    <input type='checkbox' id='bouton3' onClick="toggle('descr3');" />
    <input type='checkbox' id='bouton4' onClick="toggle('descr4');" />


css :
.mine {
	background-color: #ccc;
	height:20px;
	position:absolute;
}

Si on coche dans ' l'ordre ' tout s'affiche correctement , la description 0, puis 1 , puis 2 ..

J'etait super content
Sauf que si on coche dans le désodre, le div le plus "bas" dans le code reste affiche dessus et masque totalement les autres.

Je m'y suis surement mal pris , car une fois coché le div apparait , mais il devrait disparaitre pour laisser l'autre s'afficher quand on coche une deuxieme checkbox , mais j'ai pas la moindre idée.

HELP.

Merci[/i][/i][/i][/i]

Bonjour,

le problème est que tu fais apparaître tes div au clic, mais tu ne les fais pas disparaître : une checkbox ne se décoche pas quand on en sélectionne une autre, il est donc normal que ton code se comporte ainsi. C'est surtout un problème de sémantique et de connaissance des comportements des éléments html.

Tu devrais plutôt essayer avec des input radio, qui eux n'autorisent qu'un des leurs à être sélectionné. Je ne sais pas si ton js fonctionnera exactement de la même façon, tu devras peut-être procéder à de petites modifications.

Bon courage !