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?
Réponses
Trop de publicités?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.
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.
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à.