Case à cocher à trois états en HTML?


163

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

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


Fonctionnellement, quelle est la différence entre «non» et «nul» dans votre utilisation?
David dit de réintégrer Monica

5
Regardez les réponses ci-dessous (sauf la mienne). "Null" signifie quelque chose comme "Pas de réponse" ...
Franz

2
Exactement. C'est un élément avec des ancêtres et "null" signifie "utiliser la valeur parent".
Pekka

7
Une autre utilisation pour une case à cocher à trois états est lors de la recherche / filtrage. Par exemple, supposons que j'ai une interface pour rechercher une liste de voitures d'occasion. L'une des options de recherche peut être de savoir si la voiture a ou non un toit ouvrant. Les trois états peuvent être utilisés comme suit: Afficher uniquement les voitures AVEC un toit ouvrant uniquement Afficher les voitures SANS toit ouvrant Afficher les deux Maintenant, certainement, cela peut être géré de plusieurs façons ... nous pourrions utiliser un menu déroulant, ou nous pourrions utiliser un ensemble de trois boutons radio ... mais une case à cocher à trois états (qui est soit vide, a une coche verte, ou a un x rouge) est également une bonne solution.
Mir du

2
Il serait utile pour une liste de cases à cocher, avec une case à cocher en tête de la liste pour cocher ou décocher toutes les cases restantes. Si tous sont cochés, la case à cocher d'en-tête peut refléter cela. Si tous ne sont pas cochés, la case à cocher d'en-tête peut également le refléter. Si la liste contient une combinaison de cases cochées et non cochées, alors afficher la case à cocher d'en-tête dans un état intermédiaire fournirait un retour visuel. Cette case à cocher d'en-tête ne porterait jamais de valeur - c'est juste un repère visuel et une aide à l'interface utilisateur. Pouvoir basculer la case à cocher de la tête entre les trois états serait également pratique.
Jason

Réponses:


119

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ées indeterminate

Voir le guide de référence du 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' indeterminateétat ne peut pas être défini dans le balisage HTML, cela ne peut être fait que via Javascript (voir ce test JSfiddle et cet article détaillé dans les astuces CSS )

  • Cet état ne change pas la valeur de la case à cocher, c'est seulement un repère visuel qui masque l'état réel de l'entrée.

  • Test du navigateur: a fonctionné 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 le prennent pas en charge.

Réponse précédente

Une autre alternative serait de jouer avec la transparence des cases à cocher pour l'état « certains sélectionnés » (comme Gmail ne permet de faire 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 vérifiables et une case à cocher qui permet de sélectionner tout / aucun d'entre eux. Cette case à cocher affiche un état «certains sélectionnés» lorsque certains des éléments de la liste sont sélectionnés.

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

La classe CSS qui fait disparaître la case à cocher «sélectionner tout» serait la suivante:

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

Et le code JS qui gère les trois états 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 cela pourra aider!



1
Testé dans chrome v35 et la case à cocher «tous» ne coche que les autres cases lors du premier clic. Après cela, il ne fonctionne que pour décocher les autres cases à cocher. Corrigé dans cette version: jsfiddle.net/CHRSb/1
rdans

2
.prop('checked', ...)doit être utilisé à la place de .attr('checked', ...).
Luna

J'ai corrigé les bugs signalés par Ross; nouveau violon ici .
Mike DeSimone

48

Vous pouvez utiliser l' indeterminateattribut IDL de HTML sur les inputéléments.


3
Selon Bert Bos dans un e-mail de 2002 (< lists.w3.org/Archives/Public/www-dom/2002JanMar/0014.html> ), IE / Win et IE / Mac le supportent depuis la version 4. Firefox semble l'ont implémenté dans la version 3.6. Il semble également avoir été implémenté dans Safari en 2008. Je pense que cela ne fait pas beaucoup d'utilisateurs finaux.
Ms2ger

utilisez plutôt cette URL ( help.dottoro.com/ljuocesd.php ). Il montre qui le soutient (tout le monde bar l'opéra), depuis quand, et affiche visuellement ce que c'est. Les gens ont peur des pages de spécifications. +1 pour cette solution pas un plugin
Hashbrown

15

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
  • n'afficher aucun curseur
  • onclick handler pour basculer entre les trois états

Voir des exemples sur:

/**
 *  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');
}
<input type='text' 
       style='border: none;' 
       onfocus='this.blur()' 
       readonly='true' 
       size='1' 
       value='&#x2753;' onclick='tristate_Marks(this)' />

<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; 
       };" />  



3

Vous pouvez utiliser des groupes 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

1
Je le sais, merci. :) J'utilise actuellement selects, mais le formulaire devient un peu encombré.
Pekka

1
Eh bien, à quoi ressemblerait exactement le troisième état de toute façon? Tout comme lorsque la case est désactivée? Comment voudriez-vous déclencher cela?
Franz

3

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

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

Comme décrit ici dans la dernière astuce: http://css-tricks.com/indeterminate-checkboxes/


Bonne solution mais malheureusement cela ne fonctionne pas dans IE (test avec la version 11) car les clics plus rapides ne sont plus reconnus.
ViRuSTriNiTy

3

Voici un exemple exécutable utilisant l' indeterminateattribut mentionné :

const indeterminates = document.getElementsByClassName('indeterminate');
indeterminates['0'].indeterminate  = true;
<form>
  <div>
    <input type="checkbox" checked="checked" />True
  </div>
  <div>
    <input type="checkbox" />False
  </div>
  <div>
    <input type="checkbox" class="indeterminate" />Indeterminate
  </div>
</form>

Exécutez simplement l'extrait de code pour voir à quoi il ressemble.


2

Comme la réponse @Franz, 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 de chargement, changez-le en version javascript de la case à cocher avec un statut indéterminé.


2

Outre tous ceux cités ci-dessus, il existe des plugins jQuery qui peuvent également aider:

pour les cases à cocher individuelles:

pour les cases à cocher de comportement arborescent:

EDIT Les deux bibliothèques utilisent l' attribut de case à cocher ' indeterminate ', car cet attribut en Html5 est juste pour le style ( https://www.w3.org/TR/2011/WD-html5-20110113/number-state.html#checkbox-state ), la valeur nulle 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 cachés qui sont remplis lors de la soumission du formulaire à l'aide de javascript. Du côté du serveur, vous devrez vérifier ces champs homologues au lieu des cases à cocher d'origine, bien sûr.

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

  • Initialiser les valeurs cochées, non coché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.


2

Voici un autre exemple avec jQuery simple et propriété data-checked:

 $("#checkbox")
  .click(function(e) {
    var el = $(this);

    switch (el.data('checked')) {

      // unchecked, going indeterminate
      case 0:
        el.data('checked', 1);
        el.prop('indeterminate', true);
        break;

        // indeterminate, going checked
      case 1:
        el.data('checked', 2);
        el.prop('indeterminate', false);
        el.prop('checked', true);
        break;

        // checked, going unchecked
      default:
        el.data('checked', 0);
        el.prop('indeterminate', false);
        el.prop('checked', false);

    }
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="checkbox" name="checkbox" value="" checked id="checkbox"> Tri-State Checkbox </label>


1

En référence à la réponse @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 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 ont la même valeur. La combinaison des deux objets de données dans une seule case à cocher autorise les 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 déclenchement du changement.



0

Il est possible de désactiver les éléments de formulaire HTML , n'est-ce pas? Vos utilisateurs le verraient dans l'un des trois états, c'est-à-dire coché, non coché et désactivé, qui serait grisé et non cliquable. Pour moi, cela semble similaire à «nul» ou «sans objet» ou tout ce que vous recherchez dans ce troisième état.


Très bonne idée, mais j'ai besoin que l'utilisateur puisse à nouveau cliquer dessus. Je crains que sur une case à cocher désactivée, j'aie des difficultés à déclencher des événements et ainsi de suite.
Pekka

vous pouvez toujours voir la valeur d'une case à cocher désactivée, ce qui est déroutant pour l'utilisateur si la valeur n'est pas importante.
Janus Troelsen

Je pense que «nul» signifie que l'utilisateur ne fournit pas de réponse à la question. Cela ne signifie pas nécessairement que la question n'est pas applicable.
bdsl


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.