Bonjour à tous,

J'aimerais faire une mise en page de mes checkbox comme dans cet exemple http://plume.citron.free.fr/perso/test/03.jpg.
J'utilise ce code ci-dessous. En application lors d'un clic sur une checkbox une valeur apparait (1, 2 ou 3) ; lors d'un clic sur "tout décocher" toutes les checkbox sont décocher et les valeurs s'effacent (le bouton "ENVOI" permets d'envoyer les donner choisies sur une deuxième page, mais il n'y à pas de problème à ce niveau).

J'ai essayé de faire une mise en page en passant par des balises <table> ou avec des balises <style> (css) mais le script bug encore (lors d'un clic sur "tout décocher" toutes les checkbox ne sont pas décocher et les valeurs ne s'effacent pas).

Merci à tous.

Voici mon code :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
<html> 
<head>
<script type="text/javascript">
function ChoixClic(radio,saisirdessin) 
{
if(document.getElementById(radio).checked) 
{ 
document.getElementById(saisirdessin).style.visibility='visible';
document.getElementById(saisirdessin).style.display='block';
} 
else 
{ 
document.getElementById(saisirdessin).style.visibility='hidden';
document.getElementById(saisirdessin).style.display='none';
}
}
</script>
<script type="text/javascript">
function GereChkbox(conteneur, a_faire) {
var blnEtat=null;
var Chckbox = document.getElementById(conteneur).firstChild;
	while (Chckbox!=null) {
		if (Chckbox.nodeName=="INPUT")
			if (Chckbox.getAttribute("type")=="checkbox") {
				blnEtat = (a_faire=='0') ? false : (a_faire=='1') ? true : (document.getElementById(Chckbox.getAttribute("id")).checked) ? false : true;
				document.getElementById(Chckbox.getAttribute("id")).checked=blnEtat;
			}
		Chckbox = Chckbox.nextSibling;
	}
	document.getElementById('view1').style.visibility='hidden';
	document.getElementById('view1').style.display='none';
	document.getElementById('view2').style.visibility='hidden';
	document.getElementById('view2').style.display='none';
	document.getElementById('view3').style.visibility='hidden';
	document.getElementById('view3').style.display='none';
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="aremplir">
<div id="div_chck">
<input name="valeur_1" type="checkbox" id="valeur_1"  onClick="ChoixClic('valeur_1','view1')" value="1"><br>
<input name="valeur_2" type="checkbox" id="valeur_2"  onClick="ChoixClic('valeur_2','view2')" value="2"><br>
<input name="valeur_3" type="checkbox" id="valeur_3" onClick="ChoixClic('valeur_3','view3')" value="3"><br>
</div><br>
<input type="submit" name="button" id="button" value="ENVOI">
<input type="button" value="tout d&eacute;cocher" onClick="GereChkbox('div_chck','0');">
</form>
Vous avez choisi :<br>
<div id="view1" style="display:none">1</div>
<div id="view2" style="display:none">2</div>
<div id="view3" style="display:none">3</div>
</body>
</html>