Javascript et Checkboxes dans un DataGrid

Version imprimable

1 pièce(s) jointe(s)

Bonjour à tous,

J'ai un petit souci sur une fonction JavaScript qui doit me permettre de cocher plusieurs checkbox lorsque je coche la checkbox "mère".

Je mets le Datagrid concerné en pièce jointe. J'ai donc bien une colonne de checkbox avec une checkbox dans le header. Ce que je veux c'est que lorsque je coche la checkbox dans le header toutes les autres checkbox se cochent et inversement.

Après plusieurs recherches j'ai fait le code suivant :

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
function CheckAllDataGridCheckBoxes()
        {
 
 
//list des input dans un conteneur précis
var listInput = document.getElementById("dgdListeFicheMensuelle").getElementsByTagName("input");
var n = listInput.length;
var i, j;
 
j=0;
 
var cbx = document.getElementById('CheckAll');
         if (cbx.checked)
                {
 
 
		for (i=0; i<n; i++)
			{
			//on ne garde que les checkbox
		             if (listInput[i].type.toLowerCase()=="checkbox")
				{
			            listInput[i].checked = 'true';
				    j++;
				}
			}
                 }
 
        }

Au niveau de mon code HTML j'ai la chose suivante:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<asp:datagrid id="dgdListeFicheMensuelle" runat="server" Width="825px" AutoGenerateColumns="False" AllowSorting="True">
 
.........(tout le début de mon datagrid)...........
 
Dernière colonne:
 
<asp:TemplateColumn SortExpression="Generation" HeaderText="&nbsp&nbspEffectuer Génération&nbsp&nbsp">
<ItemStyle Wrap="False" HorizontalAlign="Center"></ItemStyle>
<headertemplate>
											<asp:checkbox id="CheckAll"  runat="server" text="Tout Sélectionner" onclick=CheckAllDataGridCheckBoxes()></asp:checkbox>
										</headertemplate>
 
<ItemTemplate>										
											<asp:checkbox id="Check" runat="server" Align = "center">
											</asp:checkbox>
</ItemTemplate>
</asp:TemplateColumn>
 
 
 
</Columns>
</asp:datagrid></DIV>

Je ne vois ce que j'ai de faux. De plus je ne sais pas trop comment debugger du Javascript. Merci de votre aide.

19/06/2008, 11h09
Bovino

Code:

listInput[i].checked = 'true';

A remplacer par :

Code:

listInput[i].checked = true;

checked est un booléen, pas une chaine...
19/06/2008, 11h19
chrislcf

Ok j'ai modifié.

Ca ne marche toujours pas.

J'ai une erreur Javascript lorsque je coche la checkbox "mère" qui me dit :

"Ligne 40(correspond à ma première ligne de ma fonction) Objet Requis"
19/06/2008, 11h26
Bovino

Code:

onclick=CheckAllDataGridCheckBoxes()

Non, raté...

Code:

onclick="CheckAllDataGridCheckBoxes()"
19/06/2008, 13h59
chrislcf

Suite du problème

Ok c'est bon cela fonctionne nikel maintnant. En fait j'ai regardé mon code source et l'id "checkall" était changé en "dgdListeFicheMensuelle__ctl1_CheckAll".

Voici ma fonction :

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
function CheckAllDataGridCheckBoxes()
        {                   
				//list des input dans un conteneur précis
				var listInput = document.Form1.document.getElementById("dgdListeFicheMensuelle").getElementsByTagName("input");
				var n = listInput.length;
				var i;
 
 
                if (document.getElementById('dgdListeFicheMensuelle__ctl1_CheckAll').checked = true)
                {
					//alert('ca passe');
 
					for (i=0; i<n; i++)
						{
							//on ne garde que les checkbox
							if (listInput[i].type.toLowerCase()=="checkbox")
								{
									//alert('ca passe');
									listInput[i].checked = true;
 
								}
						}
 
                }
 
 
 
 
        }

Par contre comment faire pour optimiser ma fonction :
1) Lorsque je décoche la case "mère" tout se décoche
2)lorsque je décoche une des checkbox la case "mère" se décoche

Pour le 1) j'ai tenté de rajouter un if :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 if (document.getElementById('dgdListeFicheMensuelle__ctl1_CheckAll').checked = false) { //alert('ca passe'); for (i=0; i<n; i++) { //on ne garde que les checkbox if (listInput[i].type.toLowerCase()=="checkbox") { //alert('ca passe'); listInput[i].checked = false; } } }
Ceci ne fonctionne pas très bien.

En effet, lorsque je coche la case "mère" toutes les checkbox se cochent mais la case "mère" reste décochée. Je peux cliquer dessus 15 fois cela ne changera rien.

???

Problème Résolu.

Voici mon code :

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
function CheckAllDataGridCheckBoxes()
        {                   
				//list des input dans un conteneur précis
				var listInput = document.Form1.document.getElementById("dgdListeFicheMensuelle").getElementsByTagName("input");
				var n = listInput.length;
				var i;
 
 
                if (document.getElementById('dgdListeFicheMensuelle__ctl1_CheckAll').checked == true)
                {
					//alert('ca passe');
 
					for (i=0; i<n; i++)
						{
							//on ne garde que les checkbox
							if (listInput[i].type.toLowerCase()=="checkbox")
								{
									//alert('ca passe');
									listInput[i].checked = true;
 
								}
						}
 
                }
 
                if (document.getElementById('dgdListeFicheMensuelle__ctl1_CheckAll').checked == false)
                {
					//alert('ca passe');
 
					for (i=0; i<n; i++)
						{
							//on ne garde que les checkbox
							if (listInput[i].type.toLowerCase()=="checkbox")
								{
									//alert('ca passe');
									listInput[i].checked = false;
 
								}
						}
 
                }               
 
        }
 
        function DecocherCheckAll()
        {
			//list des input dans un conteneur précis
 
				var i;
				var debut_id = "dgdListeFicheMensuelle__ctl";
				var fin_id = "_Check";
				var listInput = document.Form1.document.getElementById("dgdListeFicheMensuelle").getElementsByTagName("input");
				var n = listInput.length;
 
				for (i=1; i<n; i++)
						{
							//on ne garde que les checkbox
 
									if (listInput[i].type.toLowerCase()=="checkbox")
									{
									if (listInput[i].checked == false)
									document.getElementById('dgdListeFicheMensuelle__ctl1_CheckAll').checked = false;
									}
 
 
						}
 
 
        }