web-dev-qa-db-fra.com

Tri-state Case à cocher en HTML?

Il n'y a aucun moyen d'avoir un bouton de contrôle à trois états (oui, non, nul) en HTML, n'est-ce pas?

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

htmlformscheckbox
153
Pekka 웃

Edit - Grâce au commentaire de Janus Troelsen, j'ai trouvé une meilleure solution:

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

Voir guide de référence w3c . Pour que la case à cocher apparaisse indéterminée visuellement, 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 balisage HTML, cela ne peut se faire que via Javascript (voir this test JSfiddle et this article détaillé sur les astuces CSS )

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

  • Test du navigateur: Fonctionne pour moi dans Chrome 22, Firefox 15, Opera 12 et retour à 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 "sélectionné" (comme Gmail est-ce que utilisé 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 d'éléments cochés et une case à cocher permettant de sélectionner tout/aucun d'entre eux. Cette case à cocher indique un état "sélectionné" lorsque certains des éléments de la liste sont sélectionnés.

Avec une case à cocher avec un ID #select_all Et plusieurs cases à cocher avec une classe .select_one,

La classe CSS qui passe en fondu à la case "tout sélectionner" serait la suivante:

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

Et le code JS qui gère le tri-état de la case à cocher Tout sélectionner 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 ça t'as aidé!

110
pau.moreno

Vous pouvez utiliser le HTML attribut indeterminateIDL sur les éléments input.

46
Ms2ger

Ma proposition utiliserait

  • trois caractères unicode appropriés pour les trois états, par ex. , ✅, ❌
  • un champ de saisie de texte brut (taille = 1)
  • pas de frontière
  • lecture seulement
  • n'affiche aucun curseur
  • gestionnaire onclick pour basculer entre les trois états

Voir des exemples à:

Source HTML: 

<input type='text' 
       style='border: none;' 
       onfocus='this.blur()' 
       readonly='true' 
       size='1' 
       value='&#x2753;' onclick='tristate_Marks(this)' />

ou comme javascript en ligne:

<input style="border: none;"
       id="tristate" 
       type="text"  
       readonly="true" 
       size="1" 
       value="&#x2753;"  
       onclick="switch(this.form.tristate.value.charAt(0)) { 
         case '&#x2753': this.form.tristate.value='&#x2705;'; break;  
         case '&#x2705': this.form.tristate.value='&#x274C;'; break; 
         case '&#x274C': this.form.tristate.value='&#x2753;'; break; 
       };" />

Code source Javascript: 

<script type="text/javascript" charset="utf-8">
  /**
   *  loops thru the given 3 values for the given control
   */
  function tristate(control, value1, value2, value3) {
    switch (control.value.charAt(0)) {
      case value1:
        control.value = value2;
      break;
      case value2:
        control.value = value3;
      break;
      case value3:
        control.value = value1;
      break;
      default:
        // display the current value if it's unexpected
        alert(control.value);
    }
  }
  function tristate_Marks(control) {
    tristate(control,'\u2753', '\u2705', '\u274C');
  }
  function tristate_Circles(control) {
    tristate(control,'\u25EF', '\u25CE', '\u25C9');
  }
  function tristate_Ballot(control) {
    tristate(control,'\u2610', '\u2611', '\u2612');
  }
  function tristate_Check(control) {
    tristate(control,'\u25A1', '\u2754', '\u2714');
  }

</script>
12
Wolfgang Fahl

Vous pouvez utiliser un état indéterminé: http://css-tricks.com/indeterminate-checkboxes/ . Il est supporté par les navigateurs prêts à l'emploi et ne nécessite aucune bibliothèque js externe.

4
altso

Je pense que la manière la plus sémantique utilise l'attribut readonly que les entrées de 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 la dernière astuce: http://css-tricks.com/indeterminate-checkboxes/

3
Webinan

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

<input type="radio" name="choice" value="yes" />Yes
<input type="radio" name="choice" value="No" />No
<input type="radio" name="choice" value="null" />null
3
Franz

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

<select>
  <option></option>
  <option value="Yes">Yes</option>
  <option value="No">No</option>
</select>

Avec cela, vous pouvez également donner une valeur concrète qui sera envoyée avec le formulaire. Je pense qu'avec la version javascript indéterminée de la case à cocher, il enverra la valeur de soulignement de la case à cocher.

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

2
PhoneixS

En plus de tous ceux cités ci-dessus, il existe des plugins jQuery qui peuvent aussi aider:

pour les cases à cocher individuelles:

pour les cases à cocher de comportement arborescent:

[~ # ~] éditer [~ # ~] Les deux bibliothèques utilisent le ' indéterminé 'attribut de case à cocher, car cet attribut en HTML 5 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 renseignés lors de la soumission du formulaire à l'aide de javascript. Du côté du serveur, vous devrez bien sûr vérifier ces champs homologues 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 vérifiées, non vérifiées, indéterminées
  • utilisez la fonction .val () pour obtenir la valeur réelle
  • Je ne peux pas travailler. État (probablement mon erreur)

J'espère que ça t'as aidé.

2
Frank Sebastià

En se référant à @BoltClock answer , 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 bien pour moi et est assez flexible.

J'utilise deux objets 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 objets de données dans une case à cocher permet des sous-niveaux, qui sont analysés de manière récursive. Par conséquent, deux fonctions "d'assistance" sont nécessaires pour empêcher le changement.

1
MFH

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

0
Peter

Il est possible d'avoir des éléments de formulaire HTML désactivé - cela ne conviendrait-il pas? Vos utilisateurs le verraient dans l’un des trois états suivants: coché, décoché et désactivé, ce qui serait grisé et non cliquable. Pour moi, cela ressemble à "nul" ou "non applicable" ou à ce que vous recherchez dans ce troisième état.

0
AmbroseChapel

Vous devrez utiliser javascript/css pour le simuler.

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

0
Dan McGrath

Le plugin jQuery "jstree" avec le plugin checkbox peut le faire.

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

-Mat

0
Matt Frear