Mise en page ccs ou table et blocage de script

**Finelarme** · 10/12/2008, 21h01

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>

**Auteur** · 10/12/2008, 23h44

bonjour,

pour ce qui est des styles : ne confonds pas les propriétés visibility et display. Tu utilises soit l'une soit l'autre mais pas les deux c'est inutile.

Voici un script qui peut résoudre ton problème :

Code html :

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
 
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
 
<script type="text/javascript">
<!-- 
function GereChkbox(conteneur)
{
  var i, n;
  var c = document.getElementById(conteneur);
  var tabInput = c.getElementsByTagName("input");
  
  n = tabInput.length;
 
  for (i=0; i<n; i++)
  {
    if (tabInput[i].type.toLowerCase()=="checkbox")
    {
      if (tabInput[i].checked)
      {
        tabInput[i].checked = false;
        tabInput[i].onclick(); // on simule le click sur la checkbox pour cacher le div correspondant
      }
        
    }
  }  
}
 
function ChoixClic(chk, vue)
{
  if (chk.checked)
    document.getElementById(vue).style.display = "block";
  else
    document.getElementById(vue).style.display = "none";
}
 
 
//-->
</script>
 
</head>
 
<body>
 
<form id="form1" method="post" action="aremplir">
  <div id="div_chck">
    <input name="valeur_1" type="checkbox" id="valeur_1"  onclick="ChoixClic(this,'view1')" value="1" /><br/>
    <input name="valeur_2" type="checkbox" id="valeur_2"  onclick="ChoixClic(this,'view2')" value="2" /><br/>
    <input name="valeur_3" type="checkbox" id="valeur_3" onclick="ChoixClic(this,'view3')" value="3" /><br/>
  </div>
  <div> 
    <br/>
    <input type="submit" name="button" id="button" value="ENVOI"/>
    <input type="button" value="tout d&eacute;cocher" onclick="GereChkbox('div_chck');"/>
  </div>
</form>
 
<div>
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>
</div>
 
</body>
</html>

**Finelarme** · 11/12/2008, 06h32

Parfait je comprends mieux!

Mise en page ccs ou table et blocage de script

JavaScript

Vue hybride

Discussions similaires

Partager

Partager