Tri-state Case à cocher en HTML?

Question

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?

Answer 1

Une autre alternative serait de jouer avec la case à cocher de la transparence pour les "certains" de l'état (comme Gmail n'a l'habitude de faire dans les versions précédentes). Il faudra un peu de javascript et de CSS de la classe. Ici j'ai mis 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'entre eux. Cette case à cocher indique un "certains" de l'état lorsque certains des éléments de la liste sont sélectionnés.

Compte tenu d'une case à cocher avec un ID #select_all et de plusieurs cases à cocher avec une classe .select_one,

La classe CSS qui s'efface "tout sélectionner la case à cocher" serait le suivant:

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

Et le code JS qui gère le tri-état de l'sélectionnez la case tout est la suivante:

$('#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 essayer ici: http://jsfiddle.net/98BMK/

Espérons que ça aide!

MODIFIER

Grâce à Janus Troelsen commentaire, j'ai réalisé il y a une bien meilleur solution pour le problème. HTML5 définit un DOM attribut HTML cases appelées indeterminate (voir w3c referencge guide). La valeur true permet la case à cocher apparaît visuellement comme un état indéterminé. Voici Janus Troelsen le violon. Notez, cependant, que:

L' indeterminate état ne peut pas être défini dans le code HTML, il ne peut être fait via Javascript (voir ce JSfiddle test et cette article détaillé dans le CSS astuces) Cet état ne change pas la valeur et l'état de la case à cocher, il n'est qu'un repère visuel qui masque l'entrée de l'état réel. Navigateur de test: il a Travaillé pour moi dans Chrome 22, Firefox 15, Opera 12 et retour à la version IE7. Concernant le mobile broswers, Android stock du navigateur (testé sur Android 2.0 et 4.0) ne prend pas en charge la propriété à tous, et Safari mobile sur iOS 3.1 n'a pas de soutien pour elle aussi, mais à la fois le soutien de l'opacité truc expliqué dans le début de la réponse.

Answer 2

Vous pouvez utiliser l' attribut HTML indeterminate IDL sur les éléments input .

Answer 3

Cela peut vous aider Tri-State Checkbox en utilisant Javascript

Answer 4

Vous aurez certainement besoin d'une solution javascript, si vous ne souhaitez pas utiliser les boutons radio. Découvrez cet exemple http://www.terminally-incoherent.com/blog/2008/03/24/3-value-checkbox-with-jquery/ qui utilise la bibliothèque jQuery.

Answer 5

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