Version complète: sur le forum Webmaster Hub : Une checkbox avec trois états
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net
MS-DOS_1991
mardi 21 février 2006 à 11:44
Bonjour smile.gif

Dans certains programmes (sous windows en tout cas), une case à cocher peut avoir trois états différents: décoché, coché et "à moitié coché".

Est-il possible d'obtenir cela sur le web ? je pense qu'avec du javascript ça doit se faire, mais je ne vois pas comment huh.gif
Dan
mardi 21 février 2006 à 11:50
Le "à moitié coché" doit correspondre à l'état "inactive" ou "disabled", non ?

A part cette condition, une checkbox est binaire: coché/décoché du moins en HTML.
Windows gère peut-être cela différemment, mais ce n'est pas du HTML wink.gif
MS-DOS_1991
mardi 21 février 2006 à 11:59
CITATION(Dan @ mardi 21 février 2006, 11h50)
Le "à moitié coché" doit correspondre à l'état "inactive" ou "disabled", non ?

A part cette condition, une checkbox est binaire: coché/décoché du moins en HTML.
Windows gère peut-être cela différemment, mais ce n'est pas du HTML wink.gif
*

Bonjour à toi, Dan

J'ai réussi à trouver un exemple avec PsPad:


Le 2ème case correspond à ce que je voudrais obtenir unsure.gif
Dan
mardi 21 février 2006 à 12:05
En HTML tu ne pourras pas simuler 3 états pour une checkbox.

Là c'est une appli Windows, on peut donc complètement oublier les normes du Web. S'ils veulent afficher des petits coeurs au milieu des checkboxes, libre à eux smile.gif

Dan
destroyedlolo
mardi 21 février 2006 à 12:05
En HTML pure et dur, je doute que ce soit possible.

La solution que j'utiliserais serait d'utiliser une image pour represente l'etat du bouton, et de faire evolue cet etat par du javascript.
MS-DOS_1991
mardi 21 février 2006 à 12:11
CITATION(Dan @ mardi 21 février 2006, 12h05)
S'ils veulent afficher des petits coeurs au milieu des checkboxes, libre à eux smile.gif
*

Windows plein de petits coeurs, ça ce serait vu quand même laugh.gif

CITATION(destroyedlolo @ mardi 21 février 2006, 12h05)
En HTML pure et dur, je doute que ce soit possible.

La solution que j'utiliserais serait d'utiliser une image pour represente l'etat du bouton, et de faire evolue cet etat par du javascript.
*

Oui, c'est ce que je vais faire...

Merci de vos réponses B)
petit-ourson
mardi 21 février 2006 à 12:11
Ca revient pas a faire 3 radio bouton même si ça prend plus de place ? ;o)
MS-DOS_1991
mardi 21 février 2006 à 12:35
CITATION(petit-ourson @ mardi 21 février 2006, 12h11)
[...]même si ça prend plus de place ? ;o)
*

C'est ça le probleme wink.gif
MS-DOS_1991
mardi 21 février 2006 à 12:48
Bon je les ai finalement faites, mes chères checkboxes (format png 13*13):

Etat 0 (Décoché)
Etat 1 (A Moitié)
Etat 2 (Coché)

Voili voilou merci de votre aide ^_^
Vincent
mardi 21 février 2006 à 13:11
il faut oublier les checkbox d'origine mais remplacer leur fonctionnement par un traitement 'maison'.

la solution ici est de passer par une image de tes etats checkbox et sur le onclick d'affecter le traitement qui va bien.

si etat = 0 alors on affiche l'image 0
si etat = 1 alors on affiche l'image 1
si etat = 2 alors on affiche l'image 2

des que l'on clique, passer a l'etat +1 sur mon echelle de 0 à 2
MS-DOS_1991
mardi 21 février 2006 à 13:49
Comprend plus huh.gif: voici ce que je viens de pondre

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script type="text/javascript">
function updateCheckbox(id)
{
if(document.getElementById(id).src == "check_0.png")
{
document.getElementById(id).src = "check_1.png";
}
else if(document.getElementById(id).src == "check_1.png")
{
document.getElementById(id).src = "check_2.png";
}
else
{
document.getElementById(id).src = "check_0.png";
}
}
</script>
</head>
<body>
<p onClick="updateCheckbox('check')"><img id="check" src="check_0.png" title="" />&nbsp;label</p>
</body>
</html>


...mais ça ne marche pas seule la première image s'affiche (elles sont dans le même dossier que le fichier html)... où est ma faute ?
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.