Checkbox et javascript

Version imprimable

05/02/2008, 18h51
ch_lensois

Checkbox et javascript

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 :)
05/02/2008, 19h33
Auteur

bonjour,

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

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:

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 :D

Code:

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

Code:

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>

;)

06/02/2008, 11h48
ch_lensois

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 ?
06/02/2008, 11h50
KawaJVC

Oui , avec un ID c'est même plus facile je crois :)
06/02/2008, 12h02
Auteur

je te conseille vivement l'id au name et pour une raison simple : Firefox considère l'attribut name et la fonction getElementsByName() comme étant "dépréciés" (ne confonds pas la fonction getElementsByName() avec getElementsByTagName()).

Je jette un oeil à ton code...

Néanmoins, l'attribut name a son utilité. Utilise l'attribut name pour les input de type radio : il est utile pour créer différents groupes.

Tu as oublié un cas de figure :

- Si la case "Tous les choix" est coché et qu'ensuite je décoche une des autres cases, il faut décocher la case "Tous les choix" ;) J'ai créé la fonction decocherCaseTous() et ajouté l'événement onclick sur les derniers input checkbox (autrement la fonction est appelée dans clicAll() ).

- Ton code n'est pas valide XHTML1.1. Visiblement, la norme est plus stricte qu'auparavant : il faut complèter la balise <html> avec les attributs xmlns et xml:lang :

Code:

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
107
108
109
110
111
112
113
114
115
116
 
<!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="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
 
<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 ???
        }
        
        decocherCaseTous();
}
 
function decocherCaseTous()
{
    var i, cocher;
    
    cocher = true;
 
        for (i=1; i<tabChk.length; i++)
        {
                if (!tabChk[i].checked)
                {
                        cocher = false;
                }
        }
        
    tabChk[0].checked = cocher;
}
 
//-->
</script>
 
</head>
 
<body onload="initListChk()">
 
<div id="conteneur">
  <input type="checkbox" id="idchk2" onclick="clicAll(this,0)" />Tous les choix<br />
  <input style="margin-left:10px" type="checkbox" id="idchk2.1" onclick="clicAll(this,1)" />Choix 1 (comprend 2, 3, 4 ,5, 6)<br />
  <input style="margin-left:20px" type="checkbox" id="idchk2.1.1" onclick="clicAll(this,2)" />Choix 2 (comprend  3, 4 ,5, 6)<br />
  <input style="margin-left:30px" type="checkbox" id="idchk2.1.1.1" onclick="clicAll(this,3)" />Choix 3 (comprend  4 ,5)<br />
  <input style="margin-left:30px" type="checkbox" id="idchk2.1.1.1.1" onclick="decocherCaseTous()" />Choix 4<br />
  <input style="margin-left:30px" type="checkbox" id="idchk2.1.1.1.2" onclick="decocherCaseTous()" />Choix 5<br />
  <input style="margin-left:30px" type="checkbox" id="idchk2.1.1.1.3" onclick="decocherCaseTous()" />Choix 6<br />
  <input type="checkbox" id="idchk2.1.1.2" onclick="decocherCaseTous()" />Choix 7<br />
</div>
 
 
 
</body>
 
</html>

Là ça passe la validation W3C. Il ya juste un warning :

Citation:

The document is being served with the text/html Mime Type which is not a registered media type for the XHTML 1.1 Document Type. The recommended media type for this document is: application/xhtml+xml

06/02/2008, 14h21
ch_lensois

hé bien un grand merci pour votre aide. Ca marche nickel chrome.