Switch case + checkbox

**Chrisquicks** · 12/04/2020, 15h31

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 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
<!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 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
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;
       }

**psychadelic** · 12/04/2020, 15h55

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 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
<!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>

**Chrisquicks** · 12/04/2020, 17h39

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?

**psychadelic** · 12/04/2020, 18h13

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

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
<!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>

**javatwister** · 12/04/2020, 18h20

Bonjour,

Même pour un "exercice", ce n'est vraiment pas le cas où on peut utiliser case

**Chrisquicks** · 12/04/2020, 20h07

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

**Beginner.** · 12/04/2020, 20h09

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 :

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

Invité · 13/04/2020, 08h53

Bonjour,

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

Code HTML :

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

        <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 HTML :

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

        <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 HTML :

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

        <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.

Invité · 13/04/2020, 09h06

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

Code html :

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

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

**javatwister** · 13/04/2020, 09h34

D'accord avec Jreaux sur le html!

Et sinon, je relance le jeu:

Code html :

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

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 javascript :

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

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

**psychadelic** · 13/04/2020, 14h06

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

/../ 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 ! "

Invité · 13/04/2020, 14h43

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 :

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

name="choix[]"

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

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

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

4- Ce qui donne :

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
<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 php :

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

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

OU (depuis PHP 7) :

Code php :

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

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

**psychadelic** · 13/04/2020, 14h47

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 HTML :

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

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 JAVASCRIPT :

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

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 HTML :

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

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 JAVASCRIPT :

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

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

Switch case + checkbox

JavaScript

Discussions similaires

Partager

Partager