Tri-state Case à cocher en HTML?

Il n’y a aucun moyen d’avoir un bouton de vérification à trois états (oui, non, null) en HTML, non?

Existe-t-il des astuces ou des solutions simples sans avoir à rendre le tout par soi-même?

modifier

Grâce au commentaire de Janus Troelsen, j’ai trouvé une meilleure solution.

HTML5 définit une propriété pour les cases à cocher appelées indeterminate

Voir le guide de référence w3c . Pour que la case à cocher apparaisse visuellement indéterminée, définissez-la sur true:

 element.indeterminate = true; 

Voici le violon de Janus Troelsen . Notez cependant que:

  • L’état indeterminate ne peut pas être défini dans le code HTML, il ne peut être fait que via Javascript (voir ce test JSfiddle et cet article détaillé dans les astuces CSS )

  • Cet état ne modifie pas la valeur de la case à cocher, il ne s’agit que d’un repère visuel masquant l’état réel de l’entrée.

  • Test du navigateur: Travaillé pour moi dans Chrome 22, Firefox 15, Opera 12 et retour vers IE7. En ce qui concerne les navigateurs mobiles, le navigateur Android 2.0 et Safari Mobile sur iOS 3.1 ne sont pas pris en charge.

Réponse précédente

Une autre alternative serait de jouer avec la transparence de la case à cocher pour l’état “certains sélectionnés” (comme Gmail le faisait dans les versions précédentes). Il faudra du javascript et une classe CSS. Ici, je mets un exemple particulier qui gère une liste avec des éléments à cocher et une case à cocher qui permet de sélectionner tous / aucun d’entre eux. Cette case à cocher affiche un état “sélectionné” lorsque certains éléments de la liste sont sélectionnés.

Étant donné une case à cocher avec un ID #select_all et plusieurs cases à cocher avec une classe .select_one ,

La classe CSS qui fane la case à cocher “select all” serait la suivante:

 .some_selected { opacity: 0.5; filter: alpha(opacity=50); } 

Et le code JS qui gère le sorting-state de la case à cocher select all est le suivant:

 $('#select_all').change (function () { //Check/uncheck all the list's checkboxes $('.select_one').attr('checked', $(this).is(':checked')); //Remove the faded state $(this).removeClass('some_selected'); }); $('.select_one').change (function () { if ($('.select_one:checked').length == 0) $('#select_all').removeClass('some_selected').attr('checked', false); else if ($('.select_one:not(:checked)').length == 0) $('#select_all').removeClass('some_selected').attr('checked', true); else $('#select_all').addClass('some_selected').attr('checked', true); }); 

Vous pouvez l’essayer ici: http://jsfiddle.net/98BMK/

J’espère que cela pourra aider!

Vous pouvez utiliser l’ atsortingbut IDL indeterminate de HTML sur input éléments d’ input .

Ma proposition utiliserait

  • trois caractères Unicode appropriés pour les trois états, par exemple ❓, ✅, ❌
  • un champ de saisie de texte brut (taille = 1)
  • pas de frontière
  • lecture seulement
  • afficher aucun curseur
  • onclick handler pour passer par les trois états

Voir des exemples à:

Source HTML:

  

ou en javascript en ligne:

  

Code source Javascript:

  

Vous pouvez utiliser un état indéterminé: http://css-sortingcks.com/indeterminate-checkboxes/ . Il est supporté par les navigateurs externes et ne nécessite aucune bibliothèque js externe.

Vous pouvez utiliser des groupes de radio pour obtenir cette fonctionnalité:

 Yes No null 

Comme @Franz, vous pouvez également le faire avec une sélection. Par exemple:

  

Avec cela, vous pouvez également donner une valeur concrète qui sera envoyée avec le formulaire, je pense qu’avec la version indéterminée de JavaScript, elle enverra la valeur soulignée de la case à cocher.

Au moins, vous pouvez l’utiliser comme rappel lorsque javascript est désactivé. Par exemple, atsortingbuez-lui un identifiant et, dans l’événement load, modifiez-le avec la version javascript de la case à cocher avec statut indéterminé.

Outre tous les exemples cités ci-dessus, il existe des plug-ins jQuery qui peuvent vous aider:

pour les cases à cocher individuelles:

pour les cases à cocher de comportement arborescent:

EDIT Les deux bibliothèques utilisent l’atsortingbut de case à cocher ” indeterminate “, car cet atsortingbut dans Html5 est juste pour le style ( https://www.w3.org/TR/2011/WD-html5-20110113/number-state.html#checkbox-state ), la valeur null n’est jamais envoyée au serveur (les cases à cocher ne peuvent avoir que deux valeurs).

Pour pouvoir soumettre cette valeur au serveur, j’ai créé des champs homologues masqués qui sont remplis lors de la soumission du formulaire en utilisant du javascript. Du côté du serveur, vous devez bien sûr vérifier ces champs au lieu des cases à cocher d’origine.

J’ai utilisé la première bibliothèque (cases à cocher autonomes) où il est important de:

  • Initialiser les valeurs cochées, non vérifiées et indéterminées
  • utiliser la fonction .val () pour obtenir la valeur réelle
  • Impossible de faire fonctionner .state (probablement mon erreur)

J’espère que cela pourra aider.

Je pense que la manière la plus sémantique est d’utiliser l’atsortingbut readonly que les entrées de la case à cocher peuvent avoir. Pas de CSS, pas d’images, etc. une propriété HTML intégrée!

Voir violon:
http://jsfiddle.net/chriscoyier/mGg85/2/

Comme décrit ici dans le dernier tour: http://css-sortingcks.com/indeterminate-checkboxes/

Se référant à la réponse de @BoltClock, voici ma solution pour une méthode récursive plus complexe:

http://jsfiddle.net/gx7so2tq/2/

Ce n’est peut-être pas la solution la plus jolie, mais cela fonctionne très bien pour moi et est assez flexible.

J’utilise deux objects de données définissant le conteneur:

 data-select-all="chapter1" 

et les éléments eux-mêmes:

 data-select-some="chapter1" 

Les deux ayant la même valeur. La combinaison des deux objects de données dans une case à cocher permet les sous-niveaux, qui sont analysés récursivement. Par conséquent, deux fonctions “auxiliaires” sont nécessaires pour empêcher le changement de déclencheur.

Vous devrez utiliser javascript / css pour le simuler.

Essayez ici pour un exemple: http://www.dynamicdrive.com/forums/archive/index.php/t-26322.html

Il est possible d’avoir des éléments de formulaire HTML désactivés . Vos utilisateurs le verraient dans l’un des trois états suivants: vérifié, non coché et désactivé, ce qui serait grisé et non cliquable. Pour moi, cela ressemble à “null” ou “not applicable” ou à ce que vous recherchez dans ce troisième état.

Il existe une simple implémentation de champs de saisie JavaScript à trois états à l’ adresse https://github.com/supernifty/sortingstate-checkbox

Le plugin jQuery “jstree” avec le plugin checkbox peut le faire.

http://www.jstree.com/documentation/checkbox

-Mat