Topic: 3 Stage Checkbox Possible? (Page 1 of 1)

Anyone know if its possible to have a 3 stage checkbox on a form? They are pretty common in desktop apps, its either unticked, ticked or colored in.

I can't find any information on it so i'm assuming you can't do it, but if anyone knows of any ways it would be great!

Not with pure html - easy enough to do with a bit of css and javascript though...
simple read from a hidden form, style the div according to value, onclick, change to next value...

I used to place an input type='hidden' with same ID as the checkbox right before it. Once submitted the value of the if the checkbox was not ticked, it's value was not sent thus the value of the hidden field remained.

Using some JavaScript black-magic and the onlcick event of the checkbox you can use the hidden field and the checkbox together as a 3 stage checkbox, i.e:

checkbox ticked | value of the hidden | "3 stage value"
----------------+---------------------+----------------
    unticked    |      'whatever'     |  'whatever'
    unticked    |         'no'        |   'no'
     ticked     |         'yes'       |   'yes'

Style the checkbox and/or change the text of the label around the checkbox accordingly and you're done.

Hope that helps,

Thought as much, thanks!


Is there actually a way from javascript to color the inside of the checkbox? (Is this even possible with css?)

H][RO: Styling FORM fields is highly dependent of the browser/OS. But there is some techniques to 'replace' a few form fields ( such as SELECT, CHECKBOX, RADIO ) by easily stylable DIV while maintening (?) the functionnality of the FORM intact and functionnal with JavaScript disabled.

Ask Google

Read this:
http://www.quirksmode.org/css/forms.html
http://www.quirksmode.org/oddsandends/forms.html
http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml

this should get you started.

.........................................................................
:: Develop yourself, develop your life, develop the world ::
.........................................................................

quote:

---

its either unticked, ticked or colored in.

---

Are you referring to disabled, as in greyed out?

Thanks will check those links out.

DL-44: In a lot of desktop apps the 3 stages are ticked, unticked, or the whole square colored in. Not actually disabled so you cant use it. The third setting is often used for 'automatic setting' etc. I know they have 3 stage checkboxes in vb.net, comes in handy!

This is in the third stage, the box can be be cleared as shown or ticked as well (not shown)

http://www.inicom.net/pics/ffxp/f-site1x2.png



(If the link says not authorized just press refresh... not sure what they are trying to do there!)

(Edited by H][RO on 06-27-2006 02:24)

I've never seen it like that.
I've seen where it is checked and disabled, and you can click to revert it to checked and enabled. I suppose it's the same functionality, just different visual.

I would imagine done the way I've described could be mimicked in javascript...

FWIW

Hmm really, i see it on desktop apps all the time.

Its different to being disabled though, when its disabled you can't click it. So in theory there are 4 stages for it if you want to include disabled.



I wanted to use it as a yes/no/use defaults which it is commonly used for.



Having said all this its probably easier to add a default checkbox, at a 3 stage can have confusing functionality to users anyways...

quote:

---

H][RO said:

Its different to being disabled though, when its disabled you can't click it.

---

With what I'm talking about, it *looks* disabled but it is also checked. Whereas clicking a normal checked box will make it unchecked, clicking these makes them checked and enabled. This is the sort of thing that I meant that could most likely be created with javascript.

You could also mimick the functionality you describe by replacing the check box with an image for the 3rd stage (or for all 3 stages, for that matter....).

Yeh i have seen what you are talking about, i think its possibly even more confusing.

Good idea with the images actually! That might have given me some new ideas, thanks