imbrication de checkbox

**jpsegret** · 06/06/2007, 20h42

Bonsoir a tous,
Je suis en train de créer une arborescence de checkbox
ex:
checkbox1
checkbox1.1
checkbox 1.1.1
checkbox 1.1.1.1
checkbox2
....
...
Je voudrais savoir si vous saviez comment faire pour que quand je clique sur la checkbox mere(checkbox1) cela coche tte les autres imbriquées(tt sauf la checkbox2)
de meme pour la checkbox 1.1 et 1.1.1

Je tiens a preciser que ce sont des checkbox crées dynamiquement en jsp.

Merci d'avance,

**Auteur** · 06/06/2007, 23h31

bonjour,

voici un script :

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
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
 
<!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 clicChk(obj)
{
 var exp, n, i;
 
 n = tabChk.length;
 
 exp = new RegExp("^"+obj.id,"gi");
 
 for (i=0; 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="idchk1" onclick="clicChk(this)" />Checkbox 1<br />
  <input class="marge" type="checkbox" id="idchk1.1" />Checkbox 1.1<br />
  <input class="marge" type="checkbox" id="idchk1.2" />Checkbox 1.2<br />
 
  <input class="marge" type="checkbox" id="idchk1.3" onclick="clicChk(this)" />Checkbox 1.3<br />
  <input class="marge2" type="checkbox" id="idchk1.3.1" />Checkbox 1.3.1<br />
  <input class="marge2" type="checkbox" id="idchk1.3.2" />Checkbox 1.3.2<br />
  <input class="marge2" type="checkbox" id="idchk1.3.3" />Checkbox 1.3.3<br />
  <input class="marge2" type="checkbox" id="idchk1.3.4" />Checkbox 1.3.4<br />
 
  <input class="marge" type="checkbox" id="idchk1.4" />Checkbox 1.4<br />
 
  <br />
  <input type="checkbox" id="idchk2" onclick="clicChk(this)" />Checkbox 2<br />
  <input class="marge" type="checkbox" id="idchk2.1" />Checkbox 2.1<br />
  <input class="marge" type="checkbox" id="idchk2.2" />Checkbox 2.2<br />
  <input class="marge" type="checkbox" id="idchk2.3" />Checkbox 2.3<br />
</div>
 
</body>
 
</html>

Remarque :
Il y a dans la fonction clicChk une curiosité :

Code javascript :

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

1
2
3
4
5
6
7
8
9
 for (i=0; i<n; i++)
 {
    if (exp.test(tabChk[i].id) && obj.id!=tabChk[i].id)
    {
      tabChk[i].checked = obj.checked;
    }
    exp.test("");  //Pour Firefox ???
 }

Ce qui se passe : si je ne rajoute pas cette ligne (qui, à première vue est inutile), sous Firefox le test ne fonctionne qu'une fois sur deux et donc une checkbox sur 2 est cochée.
Si quelqu'un peut m'expliquer pourquoi, je lui en serais reconnaissant. Est-ce une erreur dans mon code ?

[edit]
Dans le tutoriel de Jacques Guizol, j'ai cette explication :

Envoyé par Jacques Guizol

La méthode test(<chaîne>) (buggé sous I.E.)

Cette méthode essaie d'opérer un appariement entre l'expression régulière référencée et la chaîne de caractères donnée en paramètre à partir de l'indice spécifié par la propriété lastIndex. Si un appariement est possible, lastIndex est réactualisé et la valeur booléenne renvoyée est true. Dans le cas contraire, la valeur renvoyée est false et lastIndex est remis à 0.

donc a priori faire un exp.test("") réinitialiserait le test de l'expression régulière, ou plus précisément la valeur contenue dans lastIndex (propriété non implémenté sous IE).

[/edit]

imbrication de checkbox

JavaScript

Discussions similaires

Partager

Partager