Create a tri-state checkbox?

[Marco van Herwaarden]

Need some advice from a real html/JS guru.

For a hack i am writing i need to use a tri-state checkbex.
A tri-state checkbox is like a normal on/off checkbox, but with a third state 'undefined'. You find this kind of checkboxes mostly in Client/Server software, but i know it can also be done on webpages.

Anybody know how to code that and to make sure it works on all major browsers?

[Princeton]

I"m not sure what you mean ... but try: http://www.mattkruse.com/javascript/checkboxgroup/

I don't think you should use javascript when you can build a usable interface without it. Plus, it will only cause you more headaches in the long run (more work/more support--on something that was suppose to be an 'extra').

The below info is not for you but for the general public.

CHECKBOX
A checkbox gives the user a choice.
Checkbox options are usually opposites of each other.
If by itself, ticking a checkbox means 'yes' (positive); otherwise, it means 'no' (negative).
A checkbox can be used for selecting multiple options.

Use clear LABELS to define each option. For example, yes/no, subscribe/unsubscribe, on/off

RADIO/DROPDOWN
Used to show multiple options; but the user can only choose one.


Use checkboxes/radio buttons as much as possible. Checkboxes/radio buttons are much friendlier than dropdowns. Use dropdowns only when space is limited. Try to stay away from 'multiple select' dropdowns.

[Marco van Herwaarden]

Originally Posted by princeton

I"m not sure what you mean ... but try: http://www.mattkruse.com/javascript/checkboxgroup/

No that is not what i mean.

Originally Posted by princeton

I don't think you should use javascript when you can build a usable interface without it. Plus, it will only cause you more headaches in the long run (more work/more support--on something that was suppose to be an 'extra').

I know and if someone can find me a way to do it without JS, that would be even better.

What i am looking for is somehow described here: http://www.mozilla.org/xpfe/checkboxSpec.html & http://www.mozilla.org/xpfe/xptoolkit/checkboxes.html

What i am trying to build is a search page. On this page i have many yes/no fields, which i would like to be selected with a checkbox.

For a search page you can have however 3 possible options:
- I am looking for rows where the value is 'OFF' for that field.
- I am looking for rows where the value is 'ON' for that field.
- I don't care what the value is for that field.

See my dilemma. I could use a radiogroup, but that would take a lot more space on the UI, and looks less nice.

In Client/Server software you see a lot of times checkboxes that are either Empty (off), Marked (On) or Greyout-Marked (mixed state).

[tamarian]

One way to have a 3rd state (without XUL) is by using the DISABLED attribute of the check box. I haven't done it, but I think by turning it on through an event it will grey it out.

When the form is submitted, you will not receive any state for that checkbox, neither on or off since it is not set. But this peice of info can be used to tell it has been disabled, i.e. greyed out.

[Princeton]

NOTE: I'm just making assumptions here since I really don't know what you're creating.

In Client/Server software you see a lot of times checkboxes that are either Empty (off), Marked (On) or Greyout-Marked (mixed state).

I actually think this is a waste.

It's either 'yes' or 'no'. If it's disabled or not available the answer is 'no'.

Just giving you some ideas:
If I'm creating an interface with many options I would give the user ONLY the YES checkbox (or an 'INCLUDE' List displaying the multiple options with checkbox next to it).

Include:
[] field1
[] field3
[] field5

For a search page you can have however 3 possible options:
- I am looking for rows where the value is 'OFF' for that field.
- I am looking for rows where the value is 'ON' for that field.
- I don't care what the value is for that field.

If the user does not care if the field is displayed it is best to assume that they do not want it. (the less data to fetch the quicker the page will display)

If you need to disable a field I would just use disabled="disabled". However, a better solution would be to just leave it out. Less is always better. :up:

NOTE: I do understand that sometimes the disabled="disabled' is necessary for certain interfaces.

[tamarian]

Originally Posted by princeton

It's either 'yes' or 'no'. If it's disabled or not available the answer is 'no'.

Are you sure about that? Would a disabled checkbox check true for things like isset() and empty(). I think (haven't tested) it will check false for isset(), and in that case, it is a 3rd state.

It may not be intuitive UI-wise, but from a value/state perspective, it is a 3rd state.

[Princeton]

I would set all checkbox values to integers (0 / 1).

if checked ? TRUE : otherwise FALSE;

[Paul M]

Isn't this is used for the "Quote message in reply" checkbox in Quick Reply ? Could you not see how this does it ?

[Marco van Herwaarden]

Originally Posted by princeton

If the user does not care if the field is displayed it is best to assume that they do not want it. (the less data to fetch the quicker the page will display)

Now that is why i need this. I already said it was for a search page. I will not know if the user wants to search for a certain field until he told me. Any field that he is not searching for (either searching for true or false) can be ommited from the where-clause.

Originally Posted by Paul M

Isn't this is used for the "Quote message in reply" checkbox in Quick Reply ? Could you not see how this does it ?

Hmm never noticed it there, will have a look tomorrow.

I will look into some of the suggestions made here tomorrow, but i guess it won't be possible without JS.