Switch case + checkbox

Version imprimable

Bonjour,

Je voulais savoir s'il est possible d'utiliser les checkbox avec une liste switch case? (désolé si je ne suis pas très clair, je débute lol). En gros, je voudrais associé la (ou les) checkbox cochées à ma liste switch case afin d'éviter les if / Else.

Voilà ci-dessous le test que j'ai fait mais qui ne marche évidement pas.

Merci par avance

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Checkbox</title>
 
    <script src="test.js"></script>
</head>
 
<body>
    <form>
        <legend>Comment préférez-vous passer votre temps?</legend>
        <input type="checkbox" name="choix" id="sport" value="sport"  /><label for="spo">Sport</label>
        <input type="checkbox" name="choix" id="musique" value="musique"/><label for="mus">Musique</label>
        <input type="checkbox" name="choix" id="lecture" value="lecture"  /><label for="lec">Lecture</label>
        <input type="checkbox" name="choix" id="internet" value="internet"/><label for="int">Internet</label>
    <div>
        <input type="button" id="valider" value="Valider">
    </div>
    </form>
</body>
</html>

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
window.addEventListener("load",function(){
    var bouton = document.getElementById("valider");
    bouton.addEventListener("click", choix);
  })
 
 
  var choix = document.getElementsByClassName.(choix).checked;
 
  switch (choix){
 
 
 
      case 0 :
        alert('Sport: "C\'est bien pour la santé" !');
        break;
 
       case 1 : 
         alert("Musique: 'Une âme d'artiste ?'");
         break;
 
         case 2 :
           alert("Lecture: 'Plutôt littéraire !'");
           break;
 
           case 3 :
             alert("Internet: 'Décrochez un peu de votre écran !'");
             break;
 
              default :
                alert("Veuillez faire au moins un choix!!");
                break;
       }

Y a un truc qui m'échappe dans cette logique :

avec les checbox on peut faire plusieurs choix, alors que l'utilisation de if / else if / else ne permet de ne dégager qu'un choix unique.

Alors pourquoi ne pas utiliser des boutons radios ? (qu'on peut faire ressembler à des checkbox )

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
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>... ?k</title>
  <style>
     input[type="radio"] {
      -webkit-appearance: checkbox; /* Chrome, Safari, Opera */
      -moz-appearance: checkbox;    /* Firefox */
      -ms-appearance: checkbox;     /* not currently supported */
    }
  </style>
</head>
 
<body>
 
  <form id="form-temps-libre">
    <legend>Comment préférez-vous passer votre temps?</legend>
    <label><input type="radio" name="pref-temps-libre" value="sport"    > Sport</label>
    <label><input type="radio" name="pref-temps-libre" value="musique"  > Musique</label>
    <label><input type="radio" name="pref-temps-libre" value="lecture"  > Lecture</label>
    <label><input type="radio" name="pref-temps-libre" value="internet" > Internet</label>
     <p>
      <button type="submit">Valider</button>
    </p>
  </form>
  <script>
    const fTmpLib = document.getElementById('form-temps-libre')
      ,   message = 
            { aucun:    'Veuillez faire au moins un choix!!'
            , sport:    'Sport: "C\'est bien pour la santé" !'
            , musique:  'Musique: \'Une âme d\'artiste ?\''
            , lecture:  'Lecture: \'Plutôt littéraire !\''
            , internet: 'Internet: \'Décrochez un peu de votre écran !\''
            }
    fTmpLib.onsubmit=e=>
      {
      e.preventDefault()
      let msg = message[ fTmpLib['pref-temps-libre'].value ] || 'aucun'
      alert( msg )
      }
  </script>
</body>
</html>

12/04/2020, 17h39
Chrisquicks

Bonjour,

Merci beaucoup pour cette solution seulement pour l'exercice (de ma formation) je dois utiliser l'attribut "checkbox"....mais pour le coup je ne sais pas si c'est possible d'associer chaque checkbox avec une liste case?

faut utiliser la propriété checked ( true ou false ) de chaque checkbox pour savoir s'il est coché ou non

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
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>??</title>
</head>
<body>
<form id="form-temps-libre">
  <legend>Comment préférez-vous passer votre temps?</legend>
  <label><input type="checkbox" name="choix" value="sport"    > Sport</label>
  <label><input type="checkbox" name="choix" value="musique"  > Musique</label>
  <label><input type="checkbox" name="choix" value="lecture"  > Lecture</label>
  <label><input type="checkbox" name="choix" value="internet" > Internet</label>
  <p>
    <button type="submit">Valider</button>
  </p>
</form>
 
    <script>
const fTmpLib = document.getElementById('form-temps-libre')
  ,   message = 
            { aucun:    'Veuillez faire au moins un choix!!'
            , sport:    'Sport: "C\'est bien pour la santé" !'
            , musique:  'Musique: \'Une âme d\'artiste ?\''
            , lecture:  'Lecture: \'Plutôt littéraire !\''
            , internet: 'Internet: \'Décrochez un peu de votre écran !\''
            }
fTmpLib.onsubmit=e=>
  {
  e.preventDefault()
  let nbChk = 0
  fTmpLib.choix.forEach(elm=>
    {
    if (elm.checked)
      {
      nbChk++
      alert( message[ elm.value ]  )
      }
    });
  if (nbChk===0) alert( message.aucun  )
  }
    </script>
  </body>
</html>

12/04/2020, 18h20
javatwister

Bonjour,

Même pour un "exercice", ce n'est vraiment pas le cas où on peut utiliser case :mrgreen:
12/04/2020, 20h07
Chrisquicks

Ah okkk....je ne craingnais pas d'y arriver alors lol. Donc je m'oriente comme vers les fameux If / Else, merci beaucoup pour l'info :)

Salut,

Comme l'a fait remarqué psychadelic on peut cocher plusieurs cases... Pour traiter un choix multiple j'utiliserais plusieurs if (un if pour chaque case, pas de else) ou bien le mieux ce serait de récupérer la liste des cases cochés (une seule ligne de code) et alors traiter chaque cas dans une boucle...

Exemple (utilisant l'objet message de psychadelic ) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var bouton = document.getElementById("valider");
bouton.addEventListener("click", traitement);
 
function traitement() {
 
  var radios_coches = document.querySelectorAll("input[type=checkbox]:checked");
  var rep = 'Veuillez faire au moins un choix!!'
  message = {
    sport: 'Sport: "C\'est bien pour la santé" !'
    , musique: 'Musique: \'Une âme d\'artiste ?\''
    , lecture: 'Lecture: \'Plutôt littéraire !\''
    , internet: 'Internet: \'Décrochez un peu de votre écran !\''
  }
 
  if (radios_coches.length != 0) {
    for (var i = 0, lg = radios_coches.length, rep = ""; i < lg; i++)
      rep += message[radios_coches[i].value] + "\n";
  }
  alert(rep)
  console.log(radios_coches);
}

13/04/2020, 08h53
Invité

Bonjour,

déjà, il faudrait que le code HTML soit correct !

Code:

<input type="checkbox" name="choix" id="sport" value="sport" /><label for="spo">Sport</label>

Non.

il faut que le for="..." du <label> corresponde au id="..." de l'<input> :

Code:

<input type="checkbox" name="choix" id="spo" value="sport" /><label for="spo">Sport</label>

OU, entourer l'<input> par le <label> (dans ce cas, for et id ne sont plus nécessaires) :

Code:

<label><input type="checkbox" name="choix" value="sport" /> Sport</label>

L'intérêt ici est de pouvoir cliquer sur le texte (label) pour cocher/décocher la case associée.

Voici une solution, avec switch / case : (uniquement "pour l'exercice", car la solution de Beginner. est plus optimisée)

Code:

1
2
3
4
5
6
7
8
9
10
11
<p>
  <legend>Comment préférez-vous passer votre temps?</legend>
  <label><input type="checkbox" name="choix" value="sport" /> Sport</label>
  <label><input type="checkbox" name="choix" value="musique" /> Musique</label>
  <label><input type="checkbox" name="choix" value="lecture" /> Lecture</label>
  <label><input type="checkbox" name="choix" value="internet"/> Internet</label>
</p>
<p>
  <input type="button" id="valider" value="Valider">
</p>
<div id="message"></div>

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
"use strict";
var bouton = document.getElementById("valider");
bouton.addEventListener("click", function(){
 
  var radios_coches = document.querySelectorAll("input[type=checkbox]:checked"); // checkbox cochées
  var rep = 'Veuillez faire au moins un choix!!'; // par défaut
 
  if (radios_coches.length != 0) // si on a au moins une checkbox cochée
  {
    rep = '';
    // on parcourt toutes les checkbox cochées
    for (var i = 0, lg = radios_coches.length; i < lg; i++)
    {
      switch(radios_coches[i].value)
      {
        case 'sport':
          rep += 'Sport: "C\'est bien pour la santé" !<br />' + "\n";
          break;
        case 'musique':
          rep += 'Musique: \'Une âme d\'artiste ?\'<br />' + "\n";
          break;
        case 'lecture':
          rep += 'Lecture: \'Plutôt littéraire !\'<br />' + "\n";
          break;
        case 'internet':
          rep += 'Internet: \'Décrochez un peu de votre écran !\'<br />' + "\n";
          break;
      }
    }
  }
  // affichage
  document.getElementById('message').innerHTML = rep;
});

D'accord avec Jreaux sur le html!

Et sinon, je relance le jeu:

Code:

1
2
3
4
5
6
7
8
9
10
<form>
	<legend>Comment préférez-vous passer votre temps?</legend>
		<label><input type="checkbox" name="choix" id="spo" value="Vive le sport!" />Sport</label>
		<label><input type="checkbox" name="choix" id="musique" value="Vive la musique!" />Musique</label>
		<label><input type="checkbox" name="choix" id="lecture" value="Vive la lecture!" />Lecture</label>
		<label><input type="checkbox" name="choix" id="internet" value="Vive internet!" />Internet</label>
		<div>
        <input type="submit" id="valider" value="Valider">
    </div>
</form>

(avec soumission seulement si au moins une case est cochée)

Code:

1
2
3
4
5
6
7
8
document.forms[0].addEventListener("submit",e=>{
	let off=0;
	e.target["choix"].forEach((c,i,t)=>{
		if(c.checked){alert(c.value)}
		else{off++};
		if(off==t.length){alert("Vive le choix!");e.preventDefault()}
	});
})

13/04/2020, 14h06
psychadelic

Vous mettez tous vos différents checkbox avec des name identiques ........

à lire : https://developer.mozilla.org/fr/doc..._%C3%A0_cocher

ce qui donnera à lors de l'envoi

Citation:

/../ choix=sport&choix=musique&choix=lecture&choix=internet /../

Donc si la personne coche toutes les cases, cela me semble plutôt mal venu de lui répondre [aussi] " Décrochez un peu de votre écran ! "

Citation:

Envoyé par psychadelic

Vous mettez tous vos différents checkbox avec des name identiques ........

1- En l'occurrence, c'est vrai qu'on ne se sert PAS du name="...", ici en JavaScript !

2- Mais dans un formulaire en fonctionnement "normal", pour récupérer un choix multiple (plusieurs checkbox cochées), il faut écrire le name avec des crochets :

Code:

name="choix[]"

et passer le bouton de validation en type="submit".

3- D'autre part, on note un mauvais usage de la balise <legend> :

Citation:

"L'élément HTML <legend> représente une légende pour le contenu de son élément parent <fieldset>".

4- Ce qui donne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <form method="post" action=""> <fieldset> <legend>Comment préférez-vous passer votre temps ?</legend> <p> <label><input type="checkbox" name="choix[]" value="sport" /> Sport</label> <label><input type="checkbox" name="choix[]" value="musique" /> Musique</label> <label><input type="checkbox" name="choix[]" value="lecture" /> Lecture</label> <label><input type="checkbox" name="choix[]" value="internet"/> Internet</label> </p> <p> <input type="submit" id="valider" value="Valider"> </p> <div id="message"></div> </fieldset> </form>
On récupère avec :

Code:

$choix = (isset($_POST['choix']))? $_POST['choix'] : []; // array des choix cochés

OU (depuis PHP 7) :

Code:

$choix = $_POST['choix']?? []; // array des choix cochés

Citation:

Envoyé par jreaux62

1- En l'occurrence, c'est vrai qu'on ne se sert PAS du name="...", ici en JavaScript !

Si, moi je l'utilise souvent, je trouve cela plus simple plutôt que d'utiliser les id, puisque chaque élément du formulaire peut être directement référencé par ce libellé.

exemple:
Code:

1 2 3 4 <form id="form-temps-libre"> <label><input type="checkbox" name="pref-sport" value="sport" > Sport</label> <label><input type="checkbox" name="pref-musique" value="musique" > Musique</label>
Code:

1 2 3 4 5 6 const fTmpLib = document.getElementById('form-temps-libre'); if ( fTmpLib['pref-sport'].checked ) alert( 'Sport: "C\'est bien pour la santé" !' ) if ( fTmpLib['pref-musique'].checked ) alert( 'Musique: \'Une âme d\'artiste ?\'' )
sinon la méthode avec les crochets name="choix[]" il me semble que ça ne marche que si l'on dispose d'un serveur PHP ?

mais dans tous les cas en JS fTmpLib.choix[0].checked renvoie une erreur :TypeError: fTmpLib.choix is undefined .

Si on veux que ça marche en JS il faut ne faut pas ajouter de crochets:
Code:

1 2 3 4 5 6 <form id="form-temps-libre"> <label><input type="checkbox" name="choix" value="sport" > Sport</label> <label><input type="checkbox" name="choix" value="musique" > Musique</label> <label><input type="checkbox" name="choix" value="lecture" > Lecture</label> <label><input type="checkbox" name="choix" value="internet" > Internet</label> </form>
avec
Code:

1 2 3 4 5 6 7 8 9 10 const fTmpLib = document.getElementById('form-temps-libre') fTmpLib.oninput=e=> { console.clear() console.log( '0', fTmpLib.choix[0].checked , fTmpLib.choix[0].value ) console.log( '1', fTmpLib.choix[1].checked , fTmpLib.choix[1].value ) console.log( '2', fTmpLib.choix[2].checked , fTmpLib.choix[2].value ) console.log( '3', fTmpLib.choix[3].checked , fTmpLib.choix[3].value ) }