Case à cocher à trois états en HTML?

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?

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!

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

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:

• http://jsfiddle.net/wf_bitplan_com/941std72/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');
}

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

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

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

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/

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.

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é.

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

pour les cases à cocher individuelles:

• jQuery-Tristate-Checkbox-plugin: http://vanderlee.github.io/tristate/

pour les cases à cocher de comportement arborescent:

• jQuery Tristate: http://jlbruno.github.io/jQuery-Tristate-Checkbox-plugin/

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.

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>

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.

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 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.

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

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

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

-Mat