View Full Version : Tri-state Checkboxes

11-04-2007, 02:39 PM

Over the weekend I was writing a search page and realised that a user needed to be able to select a field to be true, false, and don't care. Now, as we all know, html checkboxes are on/off only. I couldn't find one I liked, so I created a very simple javascript class to create and handle tri-state checkboxes.

It could still use some polishing (it uses images to render the checkbox, for example, and it could do with an image autoloader). The images it currently uses is firefox's checkbox, with some custom modifications. You can change these files to fit the style you need.

The link is a zip containing the javascript file tristate.js, which contains the class TriStateBox, along with an example html file to show you how to instantiate your own boxes, and a folder containing the necessary images.

Tristate Checkbox (http://www.developingme.co.uk/tristate.zip)

Hope it's helpful

11-04-2007, 02:48 PM
Hi, Kazar.

Thanks for the post. This should probably go in the DD script submission forum, though I'm not positive you want to submit it. Should I move it?

11-04-2007, 02:49 PM
Yeah, thanks - I'm just new, not sure where everything goes

11-04-2007, 03:12 PM
Well, if it isn't finished, it really should stay out here in the general forum.

11-04-2007, 03:13 PM
Well, it works, it's just at version 1.0, not 2.0

11-04-2007, 03:19 PM
Ok, it's been moved then.

Tested as well. I like it. The style doesn't look like FF (at least not as I'm used to it), but I don't mind the look. having it differ could help the user understand as well.

The problem I see with such a script is explaining it to the user, and what happens if javascript isn't enabled. A dropdown or radio set could do the same thing, using standard methods.

Aside from that, though, nice.

11-04-2007, 04:42 PM
The problem with explaining is evident - it could maybe do with more obvious negative, postive images.

11-04-2007, 04:46 PM
Perhaps [ ], [?], and [√] would be best.

11-04-2007, 04:53 PM
That is wise, although that would require the default state to be [?] - means perhaps that users would register it as different i guess

11-04-2007, 04:59 PM
Not necessarily. You could have it blank, then they click, get the [?] and figure it out from there.
However, that's a making a few assumptions.

It would be a very nice feature, but I'm not sure it really is practical, considering what users are used to.

11-04-2007, 05:25 PM
Yeah, well, the original destination use was for an admin panel advanced search, where I could basically give training session on how to use the system, so it's practical for that.

I think mozilla has an option to create tri-state checkboxes, it's just that it's only for mozilla.

11-04-2007, 05:40 PM
Well, yes, of course, if you can explain it to people. No question there :)

01-24-2008, 12:25 PM

i like to test the tristate script. But the download didnt work. Can anybody give me another download link please?



01-24-2008, 05:01 PM

i like to test the tristate script. But the download didnt work. Can anybody give me another download link please?



I guess this should have stayed out in the general area, since the author is not maintaining the link. However, the script is currently here:


A demo of its use is currently here:


The author's site is currently:


01-27-2008, 11:10 AM
Thanks a lot.

But how can i get the result after submitting a form with this kind of checkbox?

With a normal checkbox i use this:

<form action="page2.php" method="post">
<input type="checkbox" value="true" name="ch1">

on page2:

echo $_POST["ch1"];

01-27-2008, 05:59 PM
From looking at the script, that wasn't - as far as I can see, taken into consideration.

Try contacting the author.

02-10-2008, 03:36 AM
My sincerest apologies for not replying, my junk mail filter was hating dd mail. Anyway, in response to questions, the code generates a hidden input field with a name specified as a parameter to the .init() method of the tristate class. Therefore, when the containing form is submitted, the value is passed along with the rest of the form.

The value of the input field changes as the checkbox does, with -1 being a negative value, 0 being unset, and +1 being a checked box.

My apologies for not maintaining the links, have had a bit of a reshuffle around here. All links will stay as jscheuer1 said for the forseeable future.

02-10-2008, 04:15 PM
So, just to clarify this for others, on your demo page this hidden input's name is:


from the config:

<script type="text/javascript">
var testCheck1 = new TriStateBox();

In this manner each new TriStateBox() can, and probably should (unless multiple TriStates are to affect the same named value) have its own hidden input to hold its value. The value (on your demo page - this would depend upon the images used) when unchecked is 0. When checked with a check mark, the value is 1. When checked with an x, the value is -1.

Other matters related to this script are that the images it uses should be preloaded - And does it have a non-javascript fall back?

Oh, and there still is no link I could find to the zip archive mentioned in your first post, so no easy way to get the code and images together.

02-10-2008, 04:58 PM
Currently there is no non-javascript fallback - obviously, upon implementation, you insert the code into the page as shown, and then directly after in <noscript> tags, you would put a fallback.

The zip containing images and examples are at http://developingme.co.uk/uploads/tristate.zip