Petit script tout cocher - tout décocher

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

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, 17h19

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, 18h01

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, 07h08

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, 11h00

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, 11h31

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, 11h31

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

Petit script tout cocher - tout décocher

JavaScript

Vue hybride

Discussions similaires

Partager

Partager