Discussion :

[chrislcf]

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 :

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

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
 
<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.

[Bovino]

Code :

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

listInput[i].checked = 'true';

A remplacer par :

Code :

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

listInput[i].checked = true;

checked est un booléen, pas une chaine...

[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"

[Bovino]

Code :

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

onclick=CheckAllDataGridCheckBoxes()

Non, raté...

Code :

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

onclick="CheckAllDataGridCheckBoxes()"

[chrislcf]

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 :

[chrislcf]

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
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;
 
								}
						}
 
                }
 
 
 
 
        }

[chrislcf]

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 :

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
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.

???

[chrislcf]

Problème Résolu.

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
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;
									}
 
 
						}
 
 
        }