35 votes

Cochez partiellement la case avec javascript

Existe-t-il un moyen d'utiliser Javascript et HTML (5) pour faire en sorte qu'une case à cocher soit partiellement sélectionnée, comme les cases à cocher dans un menu d'installation de programme lorsque vous ne sélectionnez que certaines des sous-options?

67voto

kassens Points 2874

HTML5 définit l' indeterminate propriété booléenne.

Je l'ai testé uniquement dans le dernier Safari, Chrome et Firefox. Ils soutiennent l'état indéterminé.

Exemple: http://jsfiddle.net/5tpXc/

Edit: Notez que cela ne marchera pas avec les navigateurs plus anciens et peut-être pas les dernières versions de IE. Vous auriez besoin de s'appuyer sur des hacks comme décrit dans d'autres réponses ici si vous souhaitez prendre en charge tous les navigateurs.

5voto

BumbleB2na Points 4797

Nan. Vous devez créer un graphique de case à cocher personnalisé et le simuler.

Modifier: Référez - vous à la réponse de @ Kassen pour un moyen d'avoir partiellement coché les cases dans les navigateurs compatibles HTML5.

4voto

David Points 65209

Les cases à cocher HTML (c'est - input pour les éléments de type checkbox) ne disposent pas d'un état tiers (partiellement vérifié). Donc non, il n'y a pas de moyen direct pour ce faire.

Ce que vous auriez probablement faire est de faire un custom case-à la recherche de l'image et de se lier à ses divers événements (clic, par exemple) pour stocker l'actuel "état" dans un hidden de champ de formulaire via JavaScript. Vous pouvez exécuter dans un certain nombre de problèmes avec cette approche, si.

Par exemple, la navigation au clavier de la forme peut ne pas être possible pour cet élément particulier. (Peut un onglet à une image et l'envoyer événements de clavier? Je ne suis pas sûr.)

En outre, vous pouvez essayer de manipuler les attributs personnalisés sur une case de l'élément via le JavaScript pour stocker un état tiers. Mais le rendu de l'élément lui-même n'a pas d'indicateur visuel de quelque chose comme ça. Vous pourriez probablement manipuler son style (couleur, couleur de fond, couleur de la bordure, etc.) pour tenter d'imiter le comportement visuel. Mais vous ne pouvez pas être en mesure d'obtenir le exacte style visuel que vous êtes en utilisant pour référence.

C'est certainement une possibilité intéressante, et je suis intrigué assez pour que je puisse essayer de mettre en œuvre quelque chose comme cela dans un avenir proche. Mais avec un natif de la case de l'élément, il n'est pas possible. Il n'a que deux états.

Edit: reportez-vous à @kassens de réponse pour le faire en HTML5. Si vous êtes limité à des versions précédentes de HTML pour une raison quelconque, alors il va falloir être un hack comme décrit ici. Mais si vous pouvez vous baser sur les utilisateurs en charge HTML5, il semblerait que la prise en charge native est là.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X