Case à cocher Tri-state en HTML?

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

Voir w3c guide de référence . Pour faire case à cocher apparaître visuellement indéterminée régler à 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, il ne peut être fait via Javascript (voir ce test JSfiddle et ce article détaillé dans les trucs 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 de navigateur: travaillé 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 n'ont pas de prise en charge.

précédente réponse

une autre alternative serait de jouer avec la transparence de la case à cocher pour l'état "some selected" (comme Gmail does utilisé pour faire version.) 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 tous/aucun d'eux. Cette case à cocher affiche un État" some selected " lorsque certains é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 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 tri-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 /

Espère que ça aide!

vous pouvez utiliser les éléments indeterminate IDL attribut de HTML sur input .

ma proposition serait d'utiliser

• trois caractères unicodes appropriés pour les trois états, par exemple:"
• un simple champ de saisie de texte (size=1)
• no border
• en lecture seule
• afficher sans curseur
• onclick gestionnaire de basculer à travers les trois états

voir Exemples à:

• http://service.bitplan.com/com/bitplan/tristate/tristate.php
• http://jsfiddle.net/wf_bitplan_com/941std72/8 /

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>

vous pouvez utiliser un état indéterminé: http://css-tricks.com/indeterminate-checkboxes / . Il est pris en charge par les navigateurs de la boîte et ne nécessitent pas de bibliothèques externes js.

vous pouvez utiliser des groupes radio pour atteindre 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

comme @Franz answer vous pouvez aussi le faire avec un select. 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é 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 un rappel lorsque le javascript est désactivé. Par exemple, lui donner un id et dans l'événement de charge le changer à la version javascript de la case à statut indéterminé.

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

pour les cases à cocher individuelles:

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

pour arbre-comme le comportement des cases à cocher:

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

MODIFIER Les deux bibliothèques utilisent l'attribut ' indéterminé ' case à cocher, puisque cet attribut dans 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éé hidden les champs de contrepartie qui sont remplis lors de la soumission du formulaire en utilisant javascript. Du côté du serveur, vous devez vérifier ces champs de contrepartie 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 vérifiées, non vérifiées, indéterminées
• utiliser .fonction val() pour obtenir la valeur réelle
• ne peut pas faire travail. état (probablement mon erreur)

Espère que ça aide.

je pense que l'attribut le plus sémantique utilise l'attribut 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 truc: http://css-tricks.com/indeterminate-checkboxes/

faisant référence à @BoltClock réponse , 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 elle fonctionne très bien pour moi et est assez souple.

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"

ayant la même valeur. La combinaison des deux objets de données dans une case à cocher permet des sous-niveaux, qui sont balayés de façon récursive. Par conséquent, deux fonctions "helper" sont nécessaires pour prévenir le changement de déclencheur.

vous aurez besoin d'utiliser javascript/css pour 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 forme HTML désactivé -- n'est-ce pas? Vos utilisateurs le verraient dans l'un des trois états, c'est-à-dire vérifié, non vérifié, et désactivé, qui serait grisé et non cliquable. Pour moi, cela ressemble à "nul" ou "sans objet" ou ce que vous cherchez dans ce troisième état.

il y a une implémentation simple du champ D'entrée JavaScript tri-state à https://github.com/supernifty/tristate-checkbox

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

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

Mat