Checkbox et javascript

**ch_lensois** · 05/02/2008, 18h51

Bonjour,

je ne maitrise pas du tout javascript et je tombe sur un cas un peu compliqué pour moi.

J'ai une série de checkbox (7 au total), traitant du meme sujet.
Ce que je souhaite faire, c'est que si je coche la case 2, alors la case 3, 4 et 5 se coche aussi.

J'ai essayer trente six truc, mais je m'y connais sincèrement pas assez pour me dépatouiller.

J'ai réusi à faire une fonction que lorsque je coche la case 1 me coche tout le reste, mais la au cas par cas, j'ai du mal.

Si quelqu'un peux me mettre sur la voix

**Auteur** · 05/02/2008, 19h33

bonjour,

tu souhaites faire quelque chose dans ce genre là :
http://www.developpez.net/forums/sho...d.php?t=353406

**ch_lensois** · 06/02/2008, 11h33

alors en effet sa y ressemble, mais c'est pas exactement la même finalité.

J'ai donc modifié le code pour essayer de l'adapter au mien, mais evidement ca marche pas. Le gros soucis c'est que je vois meme pas où ca coince.

Voici ce que j'ai fait :

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<style type="text/css">
<!--
.marge{
 margin-left: 20px;
}
 
.marge2{
 margin-left: 40px;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
var tabChk = new Array();
 
function initListChk()
{
  //list des input dans la page
  //var listInput = document.getElementsByTagName("input");
 
  //list des input dans un conteneur précis
  var listInput = document.getElementById("conteneur").getElementsByTagName("input");
 
  var n = listInput.length;
  var i, j;
 
  j=0;
  for (i=0; i<n; i++)
  {
   //on ne garde que les checkbox
   if (listInput[i].type.toLowerCase()=="checkbox")
   {
     tabChk[j] = listInput[i];
     j++;
   }
  }
  //alert(tabChk.length);
}
 
function clicAll(obj,x)
{
 var exp, n, i, start;
 
 n = tabChk.length;
 
 exp = new RegExp("^"+obj.id,"gi");
 switch (x) { 
	case 1 : 
	   start=2;
	   n=6;
	   break; 
	case 2 : 
	  start=3;
	  n=6;
	  break; 
	case 3 :
	  start=4;
	  n=5;
	  break; 		
	default :
		start=0; 
 
 }
	for (i=start; i<n; i++)
	{
		if (exp.test(tabChk[i].id) && obj.id!=tabChk[i].id)
		{
		  tabChk[i].checked = obj.checked;		  
		}
		exp.test("");  //Pour Firefox ???
	 }
}
 
//-->
</script>
 
</head>
 
<body onload="initListChk()">
 
<div id="conteneur">
  <input type="checkbox" id="idchk2" onclick="clicAll(this,0)" />Tous les choix<br />
  <input type="checkbox" id="idchk2.1" onclick="clicAll(this,1)" />Choix 1 (comprend 2, 3, 4 ,5, 6)<br />
  <input type="checkbox" id="idchk2.2" onclick="clicAll(this,2)" />Choix 2 (comprend  3, 4 ,5, 6)<br />
  <input type="checkbox" id="idchk2.3" onclick="clicAll(this,3)" />Choix 3 (comprend  4 ,5)<br />
  <input type="checkbox" id="idchk2.4" />Choix 4<br />
  <input type="checkbox" id="idchk2.5" />Choix 5<br />
  <input type="checkbox" id="idchk2.6" />Choix 6<br />
  <input type="checkbox" id="idchk2.7" />Choix 7<br />
</div>
</body>
 
</html>

J'ai donc 7 choix, les Choix 1, 2 et 3 sont un peu particulier.
le Choix 1 comprend les choix 2, 3, 4 ,5, 6
le Choix 2 comprend les choix 3, 4 ,5, 6
le Choix 3 comprend les choix 4 ,5

J'ai rajouter un paramètre à la fonction inital pour checker les cases, me permettant de savoir ou commencer ma boucle et ou la finir.

Mais ca ne fait rien

***------------------------------------------------------------------***

Bon ca y'es ca marche, je sais pas si c'est correct niveau syntaxe, mais ca marche

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<style type="text/css">
<!--
.marge{
 margin-left: 20px;
}
 
.marge2{
 margin-left: 40px;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
var tabChk = new Array();
 
function initListChk()
{
  //list des input dans la page
  //var listInput = document.getElementsByTagName("input");
 
  //list des input dans un conteneur précis
  var listInput = document.getElementById("conteneur").getElementsByTagName("input");
 
  var n = listInput.length;
  var i, j;
 
  j=0;
  for (i=0; i<n; i++)
  {
   //on ne garde que les checkbox
   if (listInput[i].type.toLowerCase()=="checkbox")
   {
     tabChk[j] = listInput[i];
     j++;
   }
  }
  //alert(tabChk.length);
}
 
function clicAll(obj,x)
{
	var exp, n, i, start;
 
	n = tabChk.length;
 
	exp = new RegExp("^"+obj.id,"gi");
	switch (x) { 
		case 1 : 
			start=2;
			n=7;
			break; 
		case 2 : 
			start=3;
			n=7;
			break; 
		case 3 :
			start=4;
			n=6;
			break; 		
		default :
			start=0; 		
	}
 
	for (i=start; i<n; i++)
	{
		if (exp.test(tabChk[i].id) && obj.id!=tabChk[i].id)
		{
			tabChk[i].checked = obj.checked;		  
		}
		exp.test("");  //Pour Firefox ???
	}
}
 
//-->
</script>
 
</head>
 
<body onload="initListChk()">
 
<div id="conteneur">
  <input type="checkbox" id="idchk2" onclick="clicAll(this,0)" />Tous les choix<br />
  <input type="checkbox" id="idchk2.1" onclick="clicAll(this,1)" />Choix 1 (comprend 2, 3, 4 ,5, 6)<br />
  <input type="checkbox" id="idchk2.1.1" onclick="clicAll(this,2)" />Choix 2 (comprend  3, 4 ,5, 6)<br />
  <input type="checkbox" id="idchk2.1.1.1" onclick="clicAll(this,3)" />Choix 3 (comprend  4 ,5)<br />
  <input type="checkbox" id="idchk2.1.1.1.1" />Choix 4<br />
  <input type="checkbox" id="idchk2.1.1.1.2" />Choix 5<br />
  <input type="checkbox" id="idchk2.1.1.1.3" />Choix 6<br />
  <input type="checkbox" id="idchk2.1.1.2" />Choix 7<br />
</div>
 
 
 
</body>
 
</html>

Encore merci à vous

**KawaJVC** · 06/02/2008, 11h42

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script>
function cocher(nom)
{
document.forms["form1"].elements[nom].checked="checked";
}
</script>
<form name="form1">
<input type="checkbox" name="case1">Case 1<br>
<input type="checkbox" name="case2" OnClick="cocher('case2');cocher('case3');cocher('case4');cocher('case5');">Case 2<br>
<input type="checkbox" name="case3">Case 3<br>
<input type="checkbox" name="case4">Case 4<br>
<input type="checkbox" name="case5">Case 5<br>
</form>

**ch_lensois** · 06/02/2008, 11h48

j'ai bien pris note de ta solution KawaJVC, le soucis c'est que mes checkbox ont tous le meme attribut "name", je suppose que l'on peux faire la meme fonction avec un id plutôt que passer par le nom ?

**KawaJVC** · 06/02/2008, 11h50

Oui , avec un ID c'est même plus facile je crois

Checkbox et javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager