Liste à cocher choix multiple

**Raptor92** · 05/12/2024, 18h49

Bonjour,

Le code ci-dessous fonctionne mais je n'arrive pas à trouver comment faire pour transformer la liste en case à cocher.
L'idée étant de laisser le choix de sélectionner une ou plusieurs tailles
Pourriez vous me donner une idée
Bien à vous

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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 
<?php $p2 = array(
    "S-XXXL" => array("S", "M", "L", "XL", "XXL", "XXXL"),
    "34-48" => array("34", "36", "38", "40", "42", "44", "46", "48"),
    "50-64" => array("50", "52", "54", "56", "58", "60", "62", "64"),
    "TU" => array("TU"),
    "KG" => array("GR", "KG", "ML", "CL", "DL", "LITRE")
); ?>
<form method="post" action="">
    <select name="monSelect" onchange="changeSelect(this);">
        <option value="S-XXXL">S-XXXL</option>
        <option value="34-48">34-48</option>
        <option value="50-64">50-64</option>
        <option value="TU">TU</option>
        <option value="KG">KG</option>
    </select><br><br>
 
    <select name="S2" id="S2" style="width: 100px;height:180px" multiple="multiple" class="selecColor">
        <option value="rien">Mon choix...</option>
    </select><br><br>
 
</form>
<script>
    function changeSelect(selected) {
        //on recupere le php
        var data = <?php echo json_encode($p2); ?>;
        console.log("selected.value : " + selected.value + ", data[selected.value] : " + data[selected.value]);
        var S2 = document.getElementById("S2");
        //on efface tous les children options
        while (S2.firstChild) {
            S2.removeChild(S2.firstChild);
        }
        //on rajoute les nouveaux children options
        for (var chaqueSousTitre of data[selected.value]) {
            var opt = document.createElement("option");
            opt.value = chaqueSousTitre;
            opt.innerHTML = chaqueSousTitre;
            S2.appendChild(opt);
        }
    }
</script>
</body>
</html>

**Pytet** · 06/12/2024, 12h26

Bonjour,

Une solution possible à partir de ton code est de remplacer ta balise html <select id="S2"> par une balise <div id="S2">
puis dans la boucle js for où tu ajoutes les éléments enfants ("nouveaux children"), remplacer la création d'un élément option par la création d'un élément input avec un attribut type="checkbox".
Une balise label pour les checkbox est aussi une bonne idée.

Un test rapide à améliorer :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
        // [...]
        //on rajoute les nouveaux children options
        for (const chaqueSousTitre of data[selected.value]) {
            const cbx = document.createElement("input");
            cbx.type= 'checkbox';
            cbx.value = chaqueSousTitre;
 
            const label = document.createElement("label");
            label.innerHTML = chaqueSousTitre;
 
            label.appendChild(cbx);
            S2.appendChild(label);
        }

**BKaernel** · 06/12/2024, 12h57

Des listes à cocher ce n'est pas <select> mais <input type="checkbox">.

Avec çà tu auras à coup sûr des cases à cocher. Il y en a pleins de différentes. Regardes la doc.

C'est sur MDN : <input type="checkbox">

**Raptor92** · 06/12/2024, 14h56

Bonjour Pitet,

Merci mille fois, ta solution est exactement ce que je cherchais, une dernière question:
Comment fait-on pour aligner le résultat verticalement et non horizontalement

Nom : Combo.png
Affichages : 48
Taille : 4,5 Ko

Nom : Combo.png
Affichages : 48
Taille : 4,5 Ko

J'ai bien trouvé une solution, mais j'ai pas l'impression qu'elle soit top

Code :

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

1
2
3
4
5
6
7
8
9
<style>
.box {
  display: flex;
  flex-wrap: wrap;
}
.box>* {
  flex: 20 1 1000px;
}
</style>

Merci beaucoup

**BKaernel** · 06/12/2024, 15h11

C'est pas possible...

Pour sélectionner les résultats si ils sont disposés à l'horizontale de fait tu ne peux plus choisir une ligne puisqu'il y en a une seule. Tu vois le principe ?

**Raptor92** · 06/12/2024, 15h24

Bonjour,

Je passe le sujet en résolu car cela fonctionne parfaitement en l'état, voici le code si besoin

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
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
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 
<?php $p2 = array(
    "S-XXXL" => array("S", "M", "L", "XL", "XXL", "XXXL"),
    "34-48" => array("34", "36", "38", "40", "42", "44", "46", "48"),
    "50-64" => array("50", "52", "54", "56", "58", "60", "62", "64"),
    "TU" => array("TU"),
    "KG" => array("GR", "KG", "ML", "CL", "DL", "LITRE")
); ?>
 
<style>
.box {
  display: flex;
  flex-wrap: wrap;
}
.box>* {
  flex: 20 1 1000px;
}
</style>
    <select name="monSelect" onchange="changeSelect(this);">
        <option value="S-XXXL">S-XXXL</option>
        <option value="34-48">34-48</option>
        <option value="50-64">50-64</option>
        <option value="TU">TU</option>
        <option value="KG">KG</option>
    </select><br><br>
 
    <div id="S2" class="box" ></div>
 
<script>
    function changeSelect(selected) {
        //on recupere le php
        var data = <?php echo json_encode($p2); ?>;
        console.log("selected.value : " + selected.value + ", data[selected.value] : " + data[selected.value]);
        var S2 = document.getElementById("S2");
        //on efface tous les children options
        while (S2.firstChild) {
            S2.removeChild(S2.firstChild);
        }
        // [...]
        //on rajoute les nouveaux children options
        for (const chaqueSousTitre of data[selected.value]) {
            const cbx = document.createElement("input");
            cbx.type= 'checkbox';
            cbx.value = chaqueSousTitre;
 
            const label = document.createElement("label");
            label.innerHTML = chaqueSousTitre;
 
            label.appendChild(cbx);
            S2.appendChild(label);
        }
    }
</script>
 
</body>
</html>

Dans la version de production, j'alimente la balise <select> via une requête et ainsi permet à l'utilisateur d'ajouter des grilles de tailles si besoin

Merci à Pytet pour son aide précieuse

**NoSmoking** · 06/12/2024, 17h52

Bonjour,

Envoyé par Raptor92

J'ai bien trouvé une solution, mais j'ai pas l'impression qu'elle soit top

c'est bien compliqué pour pas grand chose, il suffit de passer tes éléments <label> en élément block :

Code css :

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

1
2
3
.box label {
  display: block;
}

Concerant la construction, traditionnellement on place l'<input type="checkbox"> à gauche du <label>, c'est plus intuitif.

La construction pourrait donc se faire comme suit :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
for (const chaqueSousTitre of data[selected.value]) {
  const cbx = document.createElement("input");
  cbx.type = 'checkbox';
  cbx.value = chaqueSousTitre;
  const label = document.createElement("label");
  //  label.innerHTML = chaqueSousTitre;
  //  label.appendChild(cbx);
  label.append(cbx, document.createTextNode(chaqueSousTitre));
  S2.appendChild(label);
}

On notera enfin qu'il manque un name à tes éléments <input type="checkbox">.

**Raptor92** · 10/12/2024, 19h24

Bonsoir,

Que dire............A part merci beaucoup

Liste à cocher choix multiple

HTML

Discussions similaires

Partager

Partager