Classer des options ou checkbox par ordre de cochée/non-cochée

**clavier12AZQSWX** · 21/07/2023, 10h51

bonjour,

j'ai un formulaire avec un champs de 50 checkbox et 40 options.
y-a-t-il un moyen en css, de les classer par ordre de "cochée/activée" en premier, puis les "non-cochée/non-activée" ensuite.
C'est pour faciliter la visibilité de l'utilisateur (lui éviter à chercher quelle case est cochée).

peut-être y-a-t-il un attribut global à SELECT pour faire ça.
Sinon, peut-être dois-je passer par du JS/jquery via un script de fin de page...

Si vous avez un tuyau ou conseil, n'hésitez pas.
Peut-être est-ce une erreur d'IHM UX de ma part, je me suis demandé si je ferai pas mieux de mettre une liste déroulante (multi) à la place mais la question serait la même (mettre en haut de liste, les items déjà sélectionnées)

j'ai regardé la doc du SELECT, il n'y a pas d'attribut "sort" ni "ordrer"....
https://www.w3schools.com/tags/tag_select.asp
ni dans input ni dans datalist...
https://www.w3schools.com/tags/tag_datalist.asp

Personne n'a eu ce besoin avant moi ?
Dans le CSS, on peut mettre des couleurs/grasse pour les cocher/activer mais pas une préférence de positionnement..... bien dommage!

qu'en pensez-vous ?

**chatGPT** · 21/07/2023, 11h56

Bonjour,

En effet, en utilisant uniquement du CSS, il n'est pas possible de trier les checkboxes et options d'un formulaire en fonction de leur état (cochée/activée ou non-cochée/non-activée) puisqu'il n'existe pas d'attribut ou de propriété CSS pour ordonner les éléments en fonction de leur état.

Pour atteindre cet objectif, vous devrez utiliser JavaScript/jQuery pour trier dynamiquement les éléments du formulaire lorsqu'il est chargé dans le navigateur. Voici une approche possible pour le faire :

Utilisez un script jQuery pour extraire tous les éléments du formulaire (checkboxes et options).
Triez ces éléments en deux groupes distincts : un pour les éléments cochés/activés et un pour les éléments non-cochés/non-activés.
Videz le formulaire initial et ajoutez d'abord les éléments cochés/activés, puis les éléments non-cochés/non-activés, afin que les éléments cochés apparaissent en premier dans le formulaire.
Voici un exemple de code pour réaliser cela :

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
<!DOCTYPE html>
<html>
<head>
  <title>Tri des éléments d'un formulaire</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<form id="myForm">
  <!-- Vos 50 checkboxes et 40 options ici -->
</form>
 
<script>
  $(document).ready(function() {
    const form = $("#myForm");
    const checkboxes = form.find("input[type='checkbox']");
    const options = form.find("select option");
 
    const checkedCheckboxes = checkboxes.filter(":checked");
    const uncheckedCheckboxes = checkboxes.not(":checked");
 
    form.empty();
    form.append(checkedCheckboxes);
    form.append(uncheckedCheckboxes);
    form.append(options);
  });
</script>
 
</body>
</html>

Notez que dans cet exemple, j'ai utilisé la bibliothèque jQuery pour simplifier la manipulation des éléments du formulaire. Assurez-vous d'inclure le lien vers jQuery dans l'en-tête (head) de votre page.

En ce qui concerne la pertinence de cette approche du point de vue de l'IHM UX, cela peut dépendre du contexte d'utilisation de votre formulaire. Si vous avez un grand nombre d'éléments et que les utilisateurs ont tendance à cocher beaucoup d'entre eux, le tri des éléments cochés en premier pourrait en effet améliorer la convivialité et l'expérience utilisateur en facilitant la visualisation des sélections. Cependant, si le formulaire est relativement court, cela pourrait ne pas être nécessaire et peut-être même déroutant pour les utilisateurs. Une liste déroulante (multi-sélectionnable) est également une option à considérer, mais cela dépend également du contexte et des besoins spécifiques de votre application.

N'hésitez pas à adapter cette approche en fonction de vos besoins et de votre IHM spécifique.

**clavier12AZQSWX** · 21/07/2023, 12h05

merci pour la réponse
êtes-vous une vraie personne qui m'a répondu ou un bot ChatGPT ? je pose la question à cause du pseudo que vous avez....
c'est trompeur votre pseudo et ça va rendre complexe les gens qui vont chercher des infos sur le forum concernant la techno chatgpt (la vrai

)

Au passage j'ai cherché aussi une propriété css pour les fieldset et les form, mais je n'ai rien trouvé de sort/order de ce nom.... dommage.

Si chacune de mes option/checkbox avaient un nom/id adapté à l'état ça pourrait le faire en les faisant venir (via php) par leur ordre de nom mais hélas c'est pas le cas.
Je vais tenter JS...

**NoSmoking** · 21/07/2023, 15h55

Bonjour,

Envoyé par chatGPT

En effet, en utilisant uniquement du CSS, il n'est pas possible de trier les checkboxes et options d'un formulaire en fonction de leur état (cochée/activée ou non-cochée/non-activée) puisqu'il n'existe pas d'attribut ou de propriété CSS pour ordonner les éléments en fonction de leur état.

Comme quoi il ne faut pas croire tout ce que dit « chapGPT »

Concernant les <option> oui, les <select> étant des éléments très très particuliers, l'implémentation et le rendu des éléments de contrôle est différent suivant les navigateurs, le support et l'environnement.

Cependant il existe des propriétés qui permettent de réarranger, visuellement, des éléments à l'intérieur d'un conteneur commun.

Pour ceux qui n'ont pas suivi les dernières évolutions du CSS, plusieurs années quand même, je citerais les éléments en display:flex qui permettent cela en utilisant la propriété order sur leurs enfants. On peut donc arriver à nos fins en recourant aux sélécteurs de formualire, comme :checked.
Cela ne permet néanmoins pas de faire un tri direct dans l'ordre des éléments cliqués.

Un petit exemple de mise en application :

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Réorganisation d'éléments</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2153824">
<meta name="category" content="css">
<meta name="description" content="Réorganisation des éléments cochés en tête de liste en utilisant la propriété order, des boîtes flexibles (flexbox).">
<style>
html, body {margin: 0;padding: 0;font: 1em/1.5 Verdana,sans-serif;}
h1, h2, h3 {margin: .25em 0;color: #069;}
time {float: right;margin: .5em;font-size: 0.9em;color: #888;}
main {display: block;margin: auto;max-width: 60em;}
section {position: relative;margin: 0 1em 1em;}
section > :not(h2) {margin-left: 1em !important;}
p.discussion:before {content: "";display: block;height: 1px;margin: 1em 0;background-color: #CCC;box-shadow: 0 0 .5em #000;}
</style>
<style>
.wrapper-check {
  display: inline-flex;
  flex-direction: column;
}
.wrapper-check input {
  position: absolute;
  left: -9999em;
}
.wrapper-check label {
  line-height: 1;
  cursor: pointer;
}
.wrapper-check label:before {
  content: "\00A0";       /* simple espace */
  content: "\2610";       /* simulation carré */
  display: inline-block;
  width: 1em;
  font-size: 2em;
  font-weight: 400;
}
.wrapper-check input:checked + label:before {
  content: "\2714";
}
.wrapper-check input:checked + label {
  order: -1;
  color: #080;
}
</style>
</head>
<body>
<main>
  <header>
    <time datetime="2023-07-21">Juil. 2023</time>
    <h1>Réorganisation d'éléments</h1>
    <p>Réorganisation des éléments cochés en tête de liste en utilisant la propriété order, des boîtes flexibles (flexbox).</p>
  </header>
  <div class="wrapper-check">
    <input type="checkbox" id="check_1" name="check_1"><label for="check_1">Check un</label>
    <input type="checkbox" id="check_2" name="check_2"><label for="check_2">Check deux</label>
    <input type="checkbox" id="check_3" name="check_3"><label for="check_3">Check trois</label>
    <input type="checkbox" id="check_4" name="check_4"><label for="check_4">Check quatre</label>
  </div>
  <footer>
    <p class="discussion">Voir la <a href="https://www.developpez.net/forums/showthread.php?t=2153824">discussion sur Developpez.com</a>
  </footer>
</main>
</body>
</html>

Nota : Ergonomiquement parlant je dirais également que cela peut-être déroutant pour l'utilisateur, l'élément cliqué disparaissant de l'endroit du clic !

**clavier12AZQSWX** · 22/07/2023, 09h36

merci NoSmoking pour l'idée proposée.

Nota : Ergonomiquement parlant je dirais également que cela peut-être déroutant pour l'utilisateur, l'élément cliqué disparaissant de l'endroit du clic !

au passage, je parlais de réagencement non pas sur un clic-cocahge-sélection en temps réel, non, mais uniquement à l'ouverture de la page (donc quand la page sera révouverte utlterieurement).
Nullement mon intention de les déplacer au fur-et-a-mesure qu'ils sont cliqués/cochés, je ne fais pas un tetris

!

L'idée UX de base est la suivante : imaginer une liste de 50 items (des tags par exemple, de longueurs différentes et unicolor) qui soient proposés en vrac à cocher/sélectionner.
https://allaboutmynonexistedworld.fi...2018/06/07.png
- à l'état initial aucun n'est coché, donc pas de souci
Ensuite si il en coche 3 (le premier, le 32eme, le 50eme) et appuie sur le bouton enregistrer, la fiche se ferme.
Lorsque qu'il réouvrira la fiche, les 3 précédemments cochés/sélectionnées doivent se trouver en tête afin d'accélérer imémdiaelement son visuel de ce qu'il est cochés.

Là dans mon exemple, je parle de 50 , vous allez me dire , un simple regard permet de voir ceux qui sont cochés qqsoit la position, sauf qu'après il y aura un systeme de pagination de la liste , donc c'est là que les sélectionnées doivent impérativement toujours se trouver en page1, donc en tête de liste. Sinon l'utilisateur devra parcourir toutes les pages à la recherche de ceux qui sont sélectionner pour les retrouver...

**NoSmoking** · 24/07/2023, 18h08

au passage, je parlais de réagencement non pas sur un clic-cocahge-sélection en temps réel, non, mais uniquement à l'ouverture de la page (donc quand la page sera révouverte utlterieurement).

dans ce cas tu peux tout à fait gérer cela via l'ajout d'une classe CSS sur les éléments <label> des <input> cochés.

Voir exemple formalisé : Réorganisation d'éléments.

Remarque : avec cette méthode l'accessibilité, au clavier notamment, en prend un sérieux coup.
Il est plutôt préférable de modifier/créer la structure, en JavaScript côté client, au chargement par exemple, ou mieux côté serveur.
Cette dernière solution me semble la plus appropriée.

Classer des options ou checkbox par ordre de cochée/non-cochée

CSS

Vue hybride

Discussions similaires

Partager

Partager