Checkbox qui update la page

Version imprimable

17/05/2021, 08h59
BartRoX

Checkbox qui update la page

Bonjour à tous !

Je dispose d'un tableau avec une trentaine de paramètres booléen qui peuvent être modifiés par l'utilisateur puis envoyés à la base de données via un bouton submit. Jusque là, pas de problème.
Maintenant je souhaiterai avoir une checkbox qui permette de tout sélectionner d'un coup lorsqu'elle est cochée.

Il semblerai d’après mes recherches que du simple code html/php ne suffise pas, et j'ai du mal à trouver une solution qui m'aide.
J'ai essayé d'appeler une fonction php via du javascript mais sans succès. au mieux j'ai réussi à afficher un message d'alerte lorsque je coche la checkbox (en javascript donc).

PS: Si cela simplifie le code, un bouton à la place de la checkbox peut faire l'affaire.

Si si, tu peux le faire en PHP au prix d'un rechargement de page et de quelques contorsions. Ce qui n'est pas forcément pertinent.

Le mieux est d'utiliser du JS et de cocher tes checkboxes "programmatiquement" lorsque le bouton (ou la case à cocher) est cliqué.

Cela pourrait donner :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <script type="module"> document.getElementById("check-all").addEventListener("click", event => { for (const element of event.target.form.elements) { if (element.type.toLowerCase() === "checkbox") { element.checked = true; } } }); </script> <form> <button type="button" id="check-all">Tout cocher</button> <input type="checkbox" ...> <input type="checkbox" ...> <input type="checkbox" ...> ... </form>

Salut

Moi en JavaScript j'en suis à cette solution

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
<!DOCTYPE html>
<html lang="fr"><!-- MultiChecked.html -->
	<head>
		<meta http-equiv="content-type" content="text/html"; charset="utf-8"/>
 	</head>
 	<body>
      <input type="checkbox" id="vehicle1" name="vehicle1" onchange="ActuEtat(this)" value="velo">
      <label for="vehicle1">j'ai un vélo</label><br>
      <input type="checkbox" id="vehicle2" name="vehicle2" onchange="ActuEtat(this)" value="voiture">
      <label for="vehicle2">j'ai une voiture</label><br>
      <input type="checkbox" id="vehicle3" name="vehicle3" onchange="ActuEtat(this)" value="bateau">
      <label for="vehicle3">j'ai un bateau</label><br>
      <input type="checkbox" id="vehicle4" name="vehicle4" onchange="ActuEtat(this)" value="avion">
      <label for="vehicle4">j'ai un avion</label><br>
      <input type="checkbox" id="vehicleS" name="vehicleS" onchange="cohertous()"value="tous">
      <label for="vehicleS" style="color:LimeGreen" >j'ai tous ses véhicules</label><br>
 
      <script>
              function ActuEtat(elem){
                if (elem.checked===false){
                  document.getElementById("vehicleS").checked = false;
                }
                const matches = document.querySelectorAll("input[type='checkbox']");
                let NbrEtatTrue = 0;
                matches.forEach((elem) => {
                   if (elem.checked === true){
                     NbrEtatTrue += 1;
                   }
                 });
                 //console.log("NbrEtatTrue"+NbrEtatTrue);
                 if (NbrEtatTrue === matches.length-1){
                   document.getElementById("vehicleS").checked = true;;
                 }
              }
              function cohertous(){
                const matches = document.querySelectorAll("input[type='checkbox']");
                //console.log("matches",matches);
                //console.log("matches",matches.length);
                //console.log("matches[matches.length-1]",matches[3].checked);
             
                matches.forEach((elem) => {
                  if (elem.id !== "vehicleS") {
                    if (matches[matches.length-1].checked === true){
                      elem.checked = true;
                      }else{
                      elem.checked = false;
                    }
                 }
                });
              }
      </script>
   </body>
</html>

mais je suis toujours en apprentissage.

18/05/2021, 06h22
BartRoX

Je vous remercie pour vos réponse,
Bien que l'approche soit différente, je vois qu'il y a moyen d'aboutir à quelque chose dans les 2 cas.

Mais néanmoins ce n'est pas si simple...

Premièrement, j'ai oublié de le préciser, mais je n'ai jamais fait de javascipt, donc certains points ici ne me sont pas du tout familier... (Je connais C++/C#, java et php)

Deuxièmement, je ne pensais pas que cela aurait de l'importance, mais en fait je me rencontre que si:
Les éléments dans ma page ne sont pas des checkbox mais des radioboutons (donc soit un choix soit l'autre), je ne peux donc pas simplement coder "coche toutes les checkbox" comme proposé...
18/05/2021, 10h09
Séb.

Citation:

Envoyé par BartRoX

Premièrement, j'ai oublié de le préciser, mais je n'ai jamais fait de javascipt, donc certains points ici ne me sont pas du tout familier... (Je connais C++/C#, java et php)

C'est le moment de t'y mettre ;)

Citation:

Deuxièmement, je ne pensais pas que cela aurait de l'importance, mais en fait je me rencontre que si:
Les éléments dans ma page ne sont pas des checkbox mais des radioboutons (donc soit un choix soit l'autre), je ne peux donc pas simplement coder "coche toutes les checkbox" comme proposé...

En effet, ça change tout. Tu veux cocher quels boutons radio ? Ils ont un point commun ? Donne des infos.

Oui, je m'y mets ! :mrgreen:

Hum...
J'ai 3 colonnes.
La première est composée de 2 radio-boutons par ligne, les 2 autres en ont 3 (un seul choix possible par colonne bien évidemment).
Le choix du radio bouton lors de la coche de la checkbox est défini.
Le nombre de ligne est variable ( :aie: ) donc le nom du radio bouton (name) possède un indice à la fin (provenant de la variable d'itération de la boucle $i).

J'ai donc quelque chose comme ca:
Code:

1 2 <input type="radio" name="MonRadio<?php echo $i;?>" <?php if(...mes conditions...){ echo "checked='checked'";}?>value="0">O <input type="radio" name="MonRadio<?php echo $i;?>" <?php if(...mes conditions inverses...){ echo "checked='checked'";}?>value="X">X</td>
La "value" à sélectionner est commune au 2 premières colonne mais différente pour la 3ème.

27/05/2021, 07h40
BartRoX

Du coup j’ai fini par remplacer la checkbox par un bouton submit qui met à jour ma base de données et rafraichi la page. Le résultat correspond à ce que je voulais et c'est facile à mettre en oeuvre en php. :mrgreen:

Merci tout de même pour votre aide !