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.

[Watilin]

Salut,
les syntaxes document.forms['annexe'] et .elements["checkbox20"] sont ambigües. En particulier, .elements["checkbox20"] peut renvoyer un tableau si plusieurs éléments ont l’attribut name="checkbox20" dans le formulaire. Et si le résultat est de type tableau, il n’y a alors pas de propriété .checked et la branche else n’est jamais exécutée.
Ce sont des différences de sémantiques assez importantes qui dépendent de la structure HTML, et tu ne m’as pas montré le code HTML. Cet exemple illustre assez bien les difficultés de maintenance qu’on peut rencontrer quand on utilise du code ambigu. Il vaut mieux toujours utiliser getElementById(), querySelector() et querySelectorAll().

Pour l’histoire du return, il faut comprendre que l’instruction return fait sortir immédiatement de la boucle (comme break). Comme l’appel à confirm() amène à un return true ou à un return false, seule la première itération de la boucle est exécutée. De plus, ça n’a pas de sens d’appeler confirm() au sein d’une boucle (tu ne veux pas poser 36 fois la même question à l’utilisatrice ou l’utilisateur).

Tu peux réutiliser le principe de la variable focusDejaDonne qui représente un « état » de la fonction : si elle est true, ça veut dire que ta fonction a trouvé une checkbox non cochée. Dans ce cas, après la boucle, tu peux utiliser focusDejaDonne pour décider quelle valeur renvoyer avec return. On pourrait renommer la variable pour lui donner un nom qui représente mieux la situation, à savoir « au moins une checkbox non cochée a été trouvée », je propose cbNonCocheeTrouvee.

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
let cbNonCocheeTrouvee = false;
for (const cb of mesCheckboxes) {
  if (!cb.checked && !cbNonCocheeTrouvee) {
    cb.focus();
    cbNonCocheeTrouvee = true;
  }
}
 
if (cbNonCocheeTrouvee) {
  const choix = confirm("Au moins une case n’est pas cochée.\nVoulez-vous vraiment poursuivre ?");
  /*
  if (choix) {
    return true;
  }
  else {
    return false;
  }
  */
  return choix;
}

Le code insertAdjacent... que tu veux insérer trouve sa place dans la boucle for. C’est un traitement qu’on veut faire quelle que soit la valeur de cbNonCocheeTrouvee. Il faut donc modifier le test if qui est dans la boucle, et le séparer en deux :

Code :

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

1
2
3
4
5
6
7
8
9
10
for (const cb of mesCheckboxes) {
  if (!cb.checked) {
    ... // traitement insertAdjacentMachin
 
    if (!cbNonCocheeTrouvee) {
      cb.focus();
      cbNonCocheeTrouvee = true;
    }
  }
}

Je te laisse le soin d’écrire ce traitement, car je ne sais pas précisément comment tu avais prévu de faire ça.
S’il y a des erreurs, tu les verras dans la console en appuyant sur F12