Petit script tout cocher - tout décocher

**arcane** · 27/08/2020, 17h17

Bonjour,
N'étant pas doué en javascript, j'essaie d'adapter des scripts trouvés sur le web.
Je voudrais faire fonctionner un pour cocher / décocher / inverser la sélection, je ne trouve pas l'erreur : (script sans doute de Eric Marcus en 2006, probablement modifié)

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
<script type="text/javascript">
<!--
// a_faire = '0' pour tout decocher 
// a_faire = '1' pour tout cocher 
// a_faire = '2' pour inverser la selection 
function GereChkbox(conteneur, a_faire) {
var blnEtat=null;
var Chckboxes = document.getElementById(conteneur).getElementsByTagName('input');
  for(var i=0;i<Chckboxes.length;i++) {
    var Chckbox = Chckboxes[i];
    if (Chckbox.nodeName=="INPUT") {
      if (Chckbox.getAttribute("type")=="checkbox") {
        blnEtat = (a_faire=='0') ? false : (a_faire=='1') ? true : (Chckbox.checked) ? false : true;
        Chckbox.checked=blnEtat;
      }
    }
  }
}
-->
</script>

Avant mon tableau :

Code HTML :

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

1
2
3
4
5
6
<form method="post" enctype="multipart/form-data" action="rap.saisie.exec.php"  name="select_lignes">
 
<input type="button" value="Tout cocher" onClick="GereChkbox('div_chck','1');">&nbsp;&nbsp;&nbsp;
<input type="button" value="Tout d&eacute;cocher" onClick="GereChkbox('div_chck','0');">&nbsp;&nbsp;&nbsp;
<input type="button" value="Inverser la s&eacute;lection" onClick="GereChkbox('div_chck','2');">
<div id="div_chck">

Dans mon tableau : (généré en php)

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
...
<tr>
	  <td><input type="checkbox" name="ligne%248817" id="ligne%248817" value="1"><label for="ligne%248817"> . </label></td>
</tr>
<tr>
	  <td><input type="checkbox" name="ligne%248827" id="ligne%248827" value="2"><label for="ligne%248827"> . </label></td>
</tr>
...
</table>
<br /><br />
<center><input border="0" name="select_lignes"  src="../images/btn_valider.gif" type="image" value="submit" width="93" height="22" alt="Affecter"></center>
 
</div>
</form>

Qu'est-ce qui ne va pas ?
Merci

**Doksuri** · 27/08/2020, 18h19

j'ai un peut modifie le 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
<button id="checkAll">Tout cocher</button>
<button id="uncheckAll">Tout d&eacute;cocher</button>
<button id="invertAllCheck">Inverser la s&eacute;lection</button>
 
<div id="div_chck">
    <table>
        <tr>
          <td><input type="checkbox" name="ligne%248817" id="ligne%248817" value="1"><label for="ligne%248817"> . </label></td>
        </tr>
        <tr>
          <td><input type="checkbox" name="ligne%248827" id="ligne%248827" value="2"><label for="ligne%248827"> . </label></td>
        </tr>
    </table>
</div>

Code javascript :

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
document.getElementById('checkAll').addEventListener('click', () => {
    checkAll('div_chck');
});
document.getElementById('uncheckAll').addEventListener('click', () => {
    uncheckAll('div_chck');
});
document.getElementById('invertAllCheck').addEventListener('click', () => {
    invertAllCheck('div_chck');
});
function checkAll(targetId) {
    GereChkbox(targetId, 1);
}
function uncheckAll(targetId) {
    GereChkbox(targetId, 0);
}
function invertAllCheck(targetId) {
    GereChkbox(targetId, 2);
}
function GereChkbox(conteneur, action) {
    document.querySelectorAll(`#${conteneur} input`).forEach(input => {
        if(action === 1) {
            input.checked = true;
        } else if (action === 0) {
            input.checked = false;
        } else {
            input.checked = !input.checked;
        }
    });
}

j'ai cree 3 functions intermediaires pour plus de clarete

**arcane** · 27/08/2020, 19h01

J'ai intégré ce code, les 3 boutons font office de validation de formulaire, mais sans rien faire au niveau des checkbox.
Du coup j'ai déplacé ma ligne <form> juste après les boutons, les boutons ne valident pas mon formulaire mais ils n'ont aucun effet sur les checkbox.
Il faudrait nommer les <button> autrement ? (pour qu'ils ne valident pas le formulaire)

Merci

**Doksuri** · 28/08/2020, 08h08

les <forms> c'est pour des donnees destines a des formulaires (qu'on envoit au serveur lors de la validation)
si tu n'envois pas les donnees au serveur, ca ne sert a rien de les mettre dans un <form>
theoriquement, c'est un <input type="submit"> qui "valide & envoie" le formulaire, c'est pour ca que j'ai mis des <button>

as-tu place le JS a la fin de ton html ?
as-tu des erreurs dans la console ?

**arcane** · 28/08/2020, 12h00

Bonjour,
J'ai bien un form pour envoyer les données (justement les cases checkbox cochées)
Par contre je mets le script dans l'entête de page html :

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
<!DOCTYPE HTML>
 
<html lang="fr">
 
<head>
<title>rapp</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="Notepad++">
<link rel="stylesheet" type="text/css" href="../styles/feuille_style.css">
<link rel="stylesheet" type="text/css" href="../styles/feuille_style_bloc.css">
<script type="text/javascript">
<!--
document.getElementById('checkAll').addEventListener('click', () => {
    checkAll('div_chck');
});
document.getElementById('uncheckAll').addEventListener('click', () => {
    uncheckAll('div_chck');
});
document.getElementById('invertAllCheck').addEventListener('click', () => {
    invertAllCheck('div_chck');
});
function checkAll(targetId) {
    GereChkbox(targetId, 1);
}
function uncheckAll(targetId) {
    GereChkbox(targetId, 0);
}
function invertAllCheck(targetId) {
    GereChkbox(targetId, 2);
}
function GereChkbox(conteneur, action) {
    document.querySelectorAll(`#${conteneur} input`).forEach(input => {
        if(action === 1) {
            input.checked = true;
        } else if (action === 0) {
            input.checked = false;
        } else {
            input.checked = !input.checked;
        }
    });
}
-->
</script>
 
</head>

Ensuite j'ai un premier tableau indépendant, puis mon formulaire dans lequel je veux cocher certaines lignes, toutes ou aucune pour les envoyer via le formulaire.

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
<font class="titreajoutmodif">BL :</font>&nbsp;&nbsp;<br /><br />
&nbsp;&nbsp;&nbsp;<button id="checkAll">Tout cocher</button>
<button id="uncheckAll">Tout d&eacute;cocher</button>
<button id="invertAllCheck">Inverser la s&eacute;lection</button>
<form method="post" enctype="multipart/form-data" action="rap.saisie.exec.php"  name="select_lignes">
   <input type="hidden" name="rap_lot_id" value="2512">
 
<div id="div_chck">
<br />
</center>
<table border="1" align="center">
<tr>
      <td> </td>
      <td>Date</td>
	  <td>Code </td>
	  <td>Nom</td>
	  <td>Code2</td>
	  <td>Nom2</td>
	  <td>Nom3</td>
	  <td>Produit</td>
	  <td>Lib produit</td>
	  <td>Qte unite vente</td>
	  <td>Code unit&eacute; vente</td>
	  <td>Prix net unitaire</td>
	  <td>S</td>
	  <td>No bon</td>
	  <td>No facture</td>
</tr>
 
	<tr>
	  <td><input type="checkbox" name="ligne%256878" id="ligne%256878" value="1"><label for="ligne%256878"> . </label></td>
	  <td>2020-03-03</td>
	  <td>102507</td>
	  <td>xxxxxx</td>
	  <td>102507</td>
	  <td>xxxxxx</td>
	  <td>xxxxxx</td>
	  <td>xxxxxx</td>
	  <td>xxxxxx</td>
	  <td>xxxxxx</td>
	  <td>xxxxxx</td>
	  <td>xxxxxx</td>
	  <td>xxxxxx</td>
	  <td>62395</td>
	  <td>0</td>
	</tr>
 
	<tr>
	  <td><input type="checkbox" name="ligne%256880" id="ligne%256880" value="2"><label for="ligne%256880"> . </label></td>
	  <td>2020-03-03</td>
	  <td>102507</td>
	  <td>xxxxxx</td>
	  <td>102507</td>
	  <td>xxxxxx</td>
	  <td>xxxxxx</td>
	  <td>xxxxxx</td>
	  <td>xxxxxx</td>
	  <td>xxxxxx</td>
	  <td>xxxxxx</td>
	  <td>xxxxxx</td>
	  <td>xxxxxx</td>
	  <td>62395</td>
	  <td>0</td>
	</tr>
	.....
 
	</table>
<br /><br />
<center><input border="0" name="select_lignes"  src="../images/btn_valider.gif" type="submit"  width="93" height="22" alt="Affecter"></center>
 
</div>
</form>
 
<br /><br />
<center>
<a href="index.php">Retour</a>
<br /><br />
</center>
 
</body>
 
</html>

J'ai testé de mettre le script à la fin du fichier html mais cela ne change rien. Je n'arrive toujours pas à utiliser les boutons

Sinon, j'ai effectivement une erreur dans la console (que je viens de découvrir !)

Uncaught TypeError: Cannot read property 'addEventListener' of null
at rap.saisie2.php:14

merci

**arcane** · 28/08/2020, 12h31

A priori l'erreur viendrait du fait qu'il faut mettre le script dans le body et non le head.
Ce que j'ai fait. Mais j'ai toujours l'erreur.

**Doksuri** · 28/08/2020, 12h31

si ton JS est en haut de page, il faut que tu encapsule les listeners que je t'ai fournis par un domcontentloaded

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
document.addEventListener('DOMContentLoaded', () {
document.getElementById('checkAll').addEventListener('click', () => {
    checkAll('div_chck');
});
document.getElementById('uncheckAll').addEventListener('click', () => {
    uncheckAll('div_chck');
});
document.getElementById('invertAllCheck').addEventListener('click', () => {
    invertAllCheck('div_chck');
});
});

**javatwister** · 30/08/2020, 18h25

Le code de Doksuri fonctionne sans problème même sans ajouter un listener sur document; (ce qui est logique)

**arcane** · 07/09/2020, 17h14

Merci de vos réponses. Je reviens sur ce script, je n'y arrive toujours pas.
J'ai testé :
En entête (<head>) : je ne mets rien de particulier.
Dans le corps de la page :

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
<button id="checkAll">Tout cocher</button>
<button id="uncheckAll">Tout d&eacute;cocher</button>
<button id="invertAllCheck">Inverser la s&eacute;lection</button>
<form method="post" enctype="multipart/form-data" action="rap.saisie.exec.php"  name="select_lignes">
<div id="div_chck">
...
<td><input type="checkbox" name="ligne%252694" id="ligne%252694" value="1"><label for="ligne%252694"> . </label></td>
...
<td><input type="checkbox" name="ligne%253469" id="ligne%253469" value="2"><label for="ligne%253469"> . </label></td>
...
<input border="0" name="select_lignes"  src="../images/btn_valider.gif" type="submit"  width="93" height="22" alt="Affecter"></center>
 
</div>
</form>
<script type="text/javascript">
<!--
document.getElementById('checkAll').addEventListener('click', () => {
    checkAll('div_chck');
});
document.getElementById('uncheckAll').addEventListener('click', () => {
    uncheckAll('div_chck');
});
document.getElementById('invertAllCheck').addEventListener('click', () => {
    invertAllCheck('div_chck');
});
function checkAll(targetId) {
    GereChkbox(targetId, 1);
}
function uncheckAll(targetId) {
    GereChkbox(targetId, 0);
}
function invertAllCheck(targetId) {
    GereChkbox(targetId, 2);
}
function GereChkbox(conteneur, action) {
    document.querySelectorAll(`#${conteneur} input`).forEach(input => {
        if(action === 1) {
            input.checked = true;
        } else if (action === 0) {
            input.checked = false;
        } else {
            input.checked = !input.checked;
        }
    });
}
-->
</script>
</body>
</html>

Note : je n'ai pas d'erreur dans la console avec cette page.

J'essaye l'autre solution : mettre le script dans le head

**arcane** · 07/09/2020, 17h35

Si je mets le script dans le head:

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
<head>
<title>...</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="HAPedit 3.1">
<link rel="stylesheet" type="text/css" href="../styles/feuille_style.css">
<link rel="stylesheet" type="text/css" href="../styles/feuille_style_bloc.css">
 
<script type="text/javascript">
<!--
document.addEventListener('DOMContentLoaded', () {
document.getElementById('checkAll').addEventListener('click', () => {
    checkAll('div_chck');
});
document.getElementById('uncheckAll').addEventListener('click', () => {
    uncheckAll('div_chck');
});
document.getElementById('invertAllCheck').addEventListener('click', () => {
    invertAllCheck('div_chck');
});
function checkAll(targetId) {
    GereChkbox(targetId, 1);
};
function uncheckAll(targetId) {
    GereChkbox(targetId, 0);
};
function invertAllCheck(targetId) {
    GereChkbox(targetId, 2);
};
function GereChkbox(conteneur, action) {
    document.querySelectorAll(`#${conteneur} input`).forEach(input => {
        if(action === 1) {
            input.checked = true;
        } else if (action === 0) {
            input.checked = false;
        } else {
            input.checked = !input.checked;
        }
    });
};
};
-->
</script>
</head>
<body>
...
<button id="checkAll">Tout cocher</button>
<button id="uncheckAll">Tout d&eacute;cocher</button>
<button id="invertAllCheck">Inverser la s&eacute;lection</button>
<form method="post" enctype="multipart/form-data" action="rap.saisie.exec.php"  name="select_lignes">
<div id="div_chck">
...
<td><input type="checkbox" name="ligne%252694" id="ligne%252694" value="1"><label for="ligne%252694"> . </label></td>
...
<td><input type="checkbox" name="ligne%253469" id="ligne%253469" value="2"><label for="ligne%253469"> . </label></td>
...
<input border="0" name="select_lignes"  src="../images/btn_valider.gif" type="submit"  width="93" height="22" alt="Affecter"></center>
 
</div>
</form>
...

Cela ne fonctionne pas non plus.
J'ai une erreur dans la console : Uncaught SyntaxError : Unexpected token ')', ligne 15.
Ligne 15 dans le source html =

Code :

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

document.addEventListener('DOMContentLoaded', () {

J'ai testé de mettre les fonctions entre () mais j'ai une erreur identique ligne 16 avec un .
Ligne 16 =

Code :

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

document.getElementById('checkAll').addEventListener('click', () => {

Je continue d'autres tests. Mais je suis preneur de vos idées.

Merci

**javatwister** · 07/09/2020, 17h43

Code javascript :

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

document.addEventListener('DOMContentLoaded', () => {

dernière ligne du script:
)};
et non
};
(tu as ouvert un listener avec une parenthèse: il faut la refermer...)

**arcane** · 07/09/2020, 18h56

Je tourne en rond : j'ai bien ajouté une parenthèse à la fin : }); plutôt que )}; pour ne pas avoir d'erreur de syntaxe.
Mais mon script ne fonctionne toujours pas, les boutons me valident le formulaire.
Du coup je mets ma ligne form juste après les boutons, les boutons ne valident plus le formulaire mais ils ne font rien.
Je dois avoir autre chose dans ma page qui bloque. Quels seraient les instructions à vérifier ? (compatibilité avec javascript, restrictions, ...)
Merci

**Doksuri** · 08/09/2020, 10h01

tu peux nous montrer le html complet ?

ps :  ce sont des commentaires html et non js

**arcane** · 08/09/2020, 13h02

Je sais que <!-- c'est un commentaire html. Je ne sais pas ce que ça fait pour javascript. Il faut en mettre ou non ? J'ai testé de les enlever, cela ne change rien.

Voici le script html complet (j'ai enlevé des lignes de tableau, ce sont toutes les mêmes)
J'ai testé directement en html pour voir, il ne fonctionne pas (ce qui est cohérent avec mon php)

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
<!DOCTYPE HTML>
 
<html lang="fr">
 
<head>
<title>Titre</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="Notepad++">
<link rel="stylesheet" type="text/css" href="../styles/feuille_style.css">
<link rel="stylesheet" type="text/css" href="../styles/feuille_style_bloc.css">
 
<script type="text/javascript">
 
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('checkAll').addEventListener('click', () => {
    checkAll('div_chck');
});
document.getElementById('uncheckAll').addEventListener('click', () => {
    uncheckAll('div_chck');
});
document.getElementById('invertAllCheck').addEventListener('click', () => {
    invertAllCheck('div_chck');
});
function checkAll(targetId) {
    GereChkbox(targetId, 1);
};
function uncheckAll(targetId) {
    GereChkbox(targetId, 0);
};
function invertAllCheck(targetId) {
    GereChkbox(targetId, 2);
};
function GereChkbox(conteneur, action) {
    document.querySelectorAll(`#${conteneur} input`).forEach(input => {
        if(action === 1) {
            input.checked = true;
        } else if (action === 0) {
            input.checked = false;
        } else {
            input.checked = !input.checked;
        }
    });
};
});
 
</script>
 
 
</head>
 
<body>
 
 
<br />
<br />
 
<font class="titrepage">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u>Rap</u>
</font>
<br /><br /><br />
 
<center>
&nbsp;&nbsp;&nbsp;<font class="titreajoutmodif">Typ Page :</font>&nbsp;&nbsp;
Texte<br />
  Texte<br />
  Debut : 2020-07-06 - Fin : 0000-00-00
 
<br /><br />
&nbsp;&nbsp;&nbsp;<font class="titreajoutmodif">Com :</font>&nbsp;&nbsp;
</center>
 
<table border="1" align="center">
<tr>
	  <td>Date</td>
	  <td>Type</td>
	  <td>Col3</td>
	  <td>Col4</td>
	  <td>Col5</td>
	  <td>Col6</td>
	  <td>Col7</td>
	  <td>Col8</td>
	  <td>Col9</td>
	  <td>Col10</td>
	  <td>Col11</td>
	  <td>Col12</td>
</tr>
 
	<tr>
	  <td>2020-07-06</td>
	  <td>m</td>
	  <td>M</td>
	  <td>P</td>
	  <td>1</td>
	  <td>T</td>
	  <td>6</td>
	  <td>2</td>
	  <td></td>
	  <td>7</td>
	  <td>3</td>
	  <td>0.018</td>
	</tr>
 
	<tr>
	  <td>2020-07-06</td>
	  <td>m</td>
	  <td>M</td>
	  <td>P</td>
	  <td>3</td>
	  <td>T</td>
	  <td>2</td>
	  <td>2</td>
	  <td></td>
	  <td>7</td>
	  <td>3</td>
	  <td>0.035</td>
	</tr>
 
	<tr>
	  <td>2020-07-06</td>
	  <td>p</td>
	  <td>A</td>
	  <td>G</td>
	  <td>3</td>
	  <td>T</td>
	  <td>1</td>
	  <td>2</td>
	  <td></td>
	  <td>7</td>
	  <td>3</td>
	  <td>3.467</td>
	</tr>
	</table>
 
<br /><br />
<center>
&nbsp;&nbsp;&nbsp;<font class="titreajoutmodif">B:</font>&nbsp;&nbsp;<br /><br />
 
 
&nbsp;&nbsp;&nbsp;<button id="checkAll">Tout cocher</button>
<button id="uncheckAll">Tout d&eacute;cocher</button>
<button id="invertAllCheck">Inverser la s&eacute;lection</button>
<form method="post" enctype="multipart/form-data" action="rap.saisie.exec.php"  name="select_lignes">
 
   <input type="hidden" name="rap_lot_id" value="2538">
 
<div id="div_chck">
<br />
</center>
 
<table border="1" align="center">
<tr>
      <td> </td>
      <td>Date</td>
	  <td>Col2</td>
	  <td>Nol3</td>
	  <td>Col4</td>
	  <td>Col5</td>
	  <td>Col6</td>
	  <td>Col7</td>
	  <td>Col8</td>
	  <td>Col9</td>
	  <td>Col10</td>
	  <td>Col11</td>
	  <td>Col12</td>
	  <td>Col13</td>
	  <td>Col14</td>
	  <td>Col15</td>
</tr>
 
	<tr>
	  <td><input type="checkbox" name="ligne%260241" id="ligne%260241" value="1"><label for="ligne%260241"> . </label></td>
	  <td>2020-03-09</td>
	  <td>1</td>
	  <td>V</td>
	  <td>1</td>
	  <td>G</td>
	  <td>L</td>
	  <td>A</td>
	  <td>F</td>
	  <td> 
	            m<input type="radio" name="blp_type%260241" value="m" /> &nbsp;&nbsp;
	            e<input type="radio" name="blp_type%260241" value="e" /> &nbsp;&nbsp;
				p<input type="radio" name="blp_type%260241" value="p" /> &nbsp;&nbsp;
				a<input type="radio" name="blp_type%260241" value="a" checked/>
	  </td>			
 
	  <td>9.78</td>
	  <td>T</td>
	  <td>245.5</td>
	  <td>2</td>
	  <td>62944</td>
	  <td>31986</td>
	</tr>
 
	<tr>
	  <td><input type="checkbox" name="ligne%271300" id="ligne%271300" value="2"><label for="ligne%271300"> . </label></td>
	  <td>2020-03-27</td>
	  <td>1</td>
	  <td>V</td>
	  <td>1</td>
	  <td>G</td>
	  <td>L</td>
	  <td>A</td>
	  <td>F</td>
	  <td> 
	            m<input type="radio" name="blp_type%271300" value="m" /> &nbsp;&nbsp;
	            e<input type="radio" name="blp_type%271300" value="e" /> &nbsp;&nbsp;
				p<input type="radio" name="blp_type%271300" value="p" /> &nbsp;&nbsp;
				a<input type="radio" name="blp_type%271300" value="a" checked/>
	  </td>			
 
	  <td>4.9</td>
	  <td>T</td>
	  <td>245.1</td>
	  <td>1</td>
	  <td>64504</td>
	  <td>32717</td>
	</tr>
 
	<tr>
	  <td><input type="checkbox" name="ligne%271299" id="ligne%271299" value="3"><label for="ligne%271299"> . </label></td>
	  <td>2020-03-27</td>
	  <td>1</td>
	  <td>V</td>
	  <td>1</td>
	  <td>G</td>
	  <td>L</td>
	  <td>A</td>
	  <td>F</td>
	  <td> 
	            m<input type="radio" name="blp_type%271299" value="m" /> &nbsp;&nbsp;
	            e<input type="radio" name="blp_type%271299" value="e" /> &nbsp;&nbsp;
				p<input type="radio" name="blp_type%271299" value="p" /> &nbsp;&nbsp;
				a<input type="radio" name="blp_type%271299" value="a" checked/>
	  </td>			
 
	  <td>7.86</td>
	  <td>T</td>
	  <td>245.1</td>
	  <td>2</td>
	  <td>64503</td>
	  <td>32717</td>
	</tr>
 
	<tr>
	  <td><input type="checkbox" name="ligne%280604" id="ligne%280604" value="4"><label for="ligne%280604"> . </label></td>
	  <td>2020-04-10</td>
	  <td>1</td>
	  <td>V</td>
	  <td>1</td>
	  <td>G</td>
	  <td>L</td>
	  <td>A</td>
	  <td>F</td>
	  <td> 
	            m<input type="radio" name="blp_type%280604" value="m" /> &nbsp;&nbsp;
	            e<input type="radio" name="blp_type%280604" value="e" /> &nbsp;&nbsp;
				p<input type="radio" name="blp_type%280604" value="p" /> &nbsp;&nbsp;
				a<input type="radio" name="blp_type%280604" value="a" checked/>
	  </td>			
 
	  <td>9.46</td>
	  <td>T</td>
	  <td>255.1</td>
	  <td>2</td>
	  <td>65643</td>
	  <td>33270</td>
	</tr>
	</table>
<br /><br />
<center><!--<input border="0" name="select_lignes"  src="../images/btn_valider.gif" type="submit"  width="93" height="22" alt="Affecter"></center>-->
<input border="0" name="select_lignes"  src="../images/btn_valider.gif" type="image" value="submit" width="93" height="22" alt="Affecter">
 
</div>
</form>
 
 
<br /><br />
<center>
<a href="index.php">Retour</a>
<br /><br />
</center>
 
</body>
 
</html>

En tout cas merci de ta patience !

**javatwister** · 08/09/2020, 13h10

Et le fait est que ce script fonctionne:

Code javascript :

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
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('checkAll').addEventListener('click', () => {
    checkAll('div_chck');
});
document.getElementById('uncheckAll').addEventListener('click', () => {
    uncheckAll('div_chck');
});
document.getElementById('invertAllCheck').addEventListener('click', () => {
    invertAllCheck('div_chck');
});
})
 
function checkAll(targetId) {
    GereChkbox(targetId, 1);
};
function uncheckAll(targetId) {
    GereChkbox(targetId, 0);
};
function invertAllCheck(targetId) {
    GereChkbox(targetId, 2);
};
function GereChkbox(conteneur, action) {
    document.querySelectorAll(`#${conteneur} input`).forEach(input => {
        if(action === 1) {
            input.checked = action;
        } else if (action === 0) {
            input.checked = action;
        } else {
            input.checked = !input.checked;
        }
    });
};

N'écris rien d'autre...

**arcane** · 08/09/2020, 13h24

Non ça ne fonctionne pas. J'ai juste remplacé le script.

**Doksuri** · 08/09/2020, 14h57

j'ai compris ton probleme : dans ton 1er exemple (sur lequel je me suis appuye pour faire le petit script), je pensais que tes checkbox etaient dans ton div "div_chck"
or, dans le dernier code fourni : ton div div_chck est vide, tes checkbox sont dans ton table

=> il te suffit de supprimer l'id du div div_chck et de le mettre sur ton table

Code html :

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

1
2
3
4
5
6
...
<div id="div_chck">
<br />
</center>
 
<table border="1" align="center">

devient :

Code html :

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

1
2
3
4
5
6
...
<div>
<br />
</center>
 
<table border="1" align="center" id="div_chck">

**arcane** · 08/09/2020, 15h38

Yes ! c'est bon pour les checkbox !

Par contre, comment ne pas prendre en compte les radio ? Je ne veux pas que les boutons interfèrent ou ne modifient les radio.
Tout cocher active les radio de droite (et peut-être les autres valeurs aussi)
Tout décocher enlève toutes les valeurs des radio
Inverser, je sais pas trop ce qu'il fait.

Merci

**Doksuri** · 08/09/2020, 15h58

tu peux modifier le selecteur dans la function GereChkbox

=> document.querySelectorAll(`#${conteneur} input[type="checkbox"]`).forEach(input => {

**arcane** · 08/09/2020, 16h11

C'est bon ça ! Merci à vous deux

Identifiez-vous

Créer un compte

Petit script tout cocher - tout décocher

JavaScript

Identifiant
Mot de passe

Mot de passe oublié ?