Discussion :

[Kévin78]

Bonjour à tous;

Je cherche une fonction Javascript me permettant de vérifier si chacun de mes checkbox inclus dans mon formulaire soit coché (et faire un focus sur celle-ci).

Mes checkbox ont toutes le même nom, mais j'ai vu sur le internet que l'on pouvait faire un tableau etc. avec comme nom="checkbox[i]. Je n'ai pas bien compris la méthode, je voulais savoir s'il y avait une autre méthode plus simple, ou si c'était la seule (et si on pouvait me l'expliquer SVP).

Merci d'avance pour votre temps.
Bonne journée !

[Watilin]

Bonjour,
pour comprendre l’aspect « formulaire HTTP classique » des checkboxes, le mieux est encore de tester toi-même :

Code html :

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

1
2
3
4
5
6
7
<form method="get" action="testform.php">
  <input type="checkbox" name="machin[]" />
  <input type="checkbox" name="machin[]" />
  <input type="checkbox" name="machin[]" />
 
  <input type="submit" />
</form>

Le script testform.php qui reçoit les données :

Code PHP :

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

1
2
3
4
5
<?php
header('Content-Type: text/plain; charset=utf-8');
ini_set('html_errors', '0');
 
print_r($_GET);

Dans ce premier exemple, il y a trois checkboxes avec le même nom machin[], le serveur les affiche sous la forme d’un tableau machin ayant 0 à 3 valeurs. Les valeurs, quand elles sont présentes, sont la chaîne "on" par défaut quand les checkboxes n’ont pas d’attribut value.

Ajoutons donc des attributs value pour voir ce que ça donne :

Code html :

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

1
2
3
4
5
6
7
<form method="get" action="testform.php">
  <input type="checkbox" name="machin[]" value="pomme" />
  <input type="checkbox" name="machin[]" value="fraise" />
  <input type="checkbox" name="machin[]" value="rhubarbe" />
 
  <input type="submit" />
</form>

On obtient par exemple ceci :

Code texte :

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

1
2
3
4
5
6
7
8
9
Array
(
    [machin] => Array
        (
            [0] => fraise
            [1] => rhubarbe
        )
 
)

Pour avoir une information sur l’ordre des checkboxes, tu peux rajouter des trucs entre les crochets. Souvent on met des nombres mais on peut aussi mettre des lettres, et sans doute d’autres caractères tant que ça ne modifie pas la syntaxe.

Code html :

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

1
2
3
4
5
6
7
<form method="get" action="testform.php">
  <input type="checkbox" name="machin[0]" value="pomme" />
  <input type="checkbox" name="machin[1]" value="fraise" />
  <input type="checkbox" name="machin[2]" value="rhubarbe" />
 
  <input type="submit" />
</form>

Ou encore :

Code html :

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

1
2
3
4
5
6
7
<form method="get" action="testform.php">
  <input type="checkbox" name="machin[a]"     value="pomme" />
  <input type="checkbox" name="machin[magie]" value="fraise" />
  <input type="checkbox" name="machin[42]"    value="rhubarbe" />
 
  <input type="submit" />
</form>

---

En ce qui concerne le JavaScript, tu peux utiliser querySelectorAll() pour obtenir facilement une collection de toutes les checkboxes de ton formulaire :

Code :

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

1
2
const monForm =  ... ;
const mesCheckboxes = monForm.querySelectorAll("input[type='checkbox']");

Pour parcourir cette collection, il y a plusieurs façons de faire. Je te propose d’utiliser une boucle for...of :

Code :

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

1
2
3
for (const cb of mesCheckboxes) {
  ...
}

Au sein de cette boucle, tu peux tester la propriété checked de la checkbox représentée par la variable cb. Reste à savoir à qui donner le focus, car un seul élément peut avoir le focus à la fois. Je propose d’utiliser une variable booléenne focusDejaDonne.

Code :

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

1
2
3
4
5
6
7
let focusDejaDonne = false;
for (const cb of mesCheckboxes) {
  if (!cb.checked && !focusDejaDonne) {
    cb.focus();
    focusDejaDonne = true;
  }
}

Pour finir, j’imagine que tu auras envie d’ajouter un message à côté d’une checkbox non cochée. Tu peux utiliser insertAdjacentElement() ou insertAdjacentHTML(). Si tu veux remonter l’arbre HTML, tu peux également combiner ces méthodes avec parentElement ou encore closest().

La méthode scrollIntoView() pourrait t’intéresser également.

[Kévin78]

Bonjour,

Franchement un grand merci, bien détaillé, bien expliqué !
Cela fonctionne très bien pour moi c'est parfait !

Bonne journée a toi !!

[Kévin78]

Juste une petite question,

Lorsque j'utilise la fonction insertAdjacentElement ou insertAdjacentHTML avant mon return false,
Il ne prend pas en compte ni mon return false, ni mon insert.
Alors que lorsqu'il y a simplement mon return false, il me fait mon focus.

Une idée SVP ?

[Watilin]

Sans doute une erreur de syntaxe. Je peux voir ton code ?

[Kévin78]

Oui je pense, j'ai supprimé du coup cette fonction de mon code, mais surement si tu l'appliques avec tes compétences tu sauras mieux l'intégrer que moi j'en suis sur !

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
function ValidePourMail() {
 
    if ((document.forms['annexe'].elements["checkbox20"].checked != true)) {
        alert("Vous n'avez pas coché la dernière case qui certifie que vous avez respectez la charte");
        return false;
 
    } else {
 
        const monForm = document.forms["annexe"];
        const mesCheckboxes = monForm.querySelectorAll("input[type='checkbox']");
        let focusDejaDonne = false;
        for (const cb of mesCheckboxes) {
            if (!cb.checked && !focusDejaDonne) {
                alert("Une case n'est pas coché ");
                cb.focus();
                focusDejaDonne = true;
                if (confirm("Vous voulez vraiment poursuivre ?")) {
                    return true;
                } else {
                   // Code fonction
                    return false;
                }
            }
        }
 
    }

J'aimerais intégrer cette fonction juste au dessus du return false si possible.