Friday, December 19, 2008

Recently I noticed how yahoo mail select all check box only shows twostates while selecting/un-selecting mails to perform various actions.So I decided to experiment and create a simple tri-state check box that could display my intermediate state. Below is what I ended up with:

Tri-State Checkbox Demo with dependent checkboxes

Select/Unselect All

Java Html Css Javascipt Ruby Python

It's really simple to use. Here's what you have to do:

Include the javascript file in your html

Have a place-holder node (span in my case) to hold the image for the tri-state box

So thanks for the work! I was looking for a similar workaround so it came handy ;-)

@5009017766772374021.0

thanks. i would prefer not having to declare the image explicitly and let the script create the image.

i had a look at a couple of videos of iwebmvc. it looks cool, really easy to crud entities. where do you use it?

It would be nice to have multiple levels of nestings.

@6381151318299345257.0

it should be easy to do. You need to modify the script a little bit to handle the scenario of a nested tri-statebox along with the checkboxes.

@ShamsWhat modifications would need to be done?

@Sham @ShamI don't think you could do it with custom attributes on the span you are creating. Because you have to walk up and down the hierarchy from the given tristatebox you are at. I'm not sure there is an easy way to wrap that all up.

@6890186105621465004.1 ok i'll look into it later today. just need to manage a way to instruct the checkboxes to also update any tri-states in the ancestry

My suggestion is to use a single image for all states and move it to the correct location. This technique is referred to as css sprites. You can see google using the sprites technique as well.

I have a problem. Do you mind if I post my script and ask for your help to edit it? I have a problem with step 3

@1417280941803828149.0

agreed.

@7724909267454523655.0

sorry for the late reply. feel free to email me explaining the problem ur facing

Shams, just wanted to let you know that I created a JSF tri-state-checkbox. I would like to include your checkbox images in a downloadable package with my checkbox implementation from my blog. I already have a link to your blog entry on my site. Are you ok with that? http://digitaljoel.blogspot.com/2009/07/tri-state-checkbox.html

@2898298704497544934.0

sure go ahead. fearphage had a suggestion about using sprites. maybe you can implement that too to save on requests to load the image

@Shamsyeah, I saw that sprite suggestion and looked into it a while back but probably won't be doing it this iteration. Thanks!

It is extremely interesting for me to read the article. Thank author for it. I like such themes and everything connected to this matter. I definitely want to read a bit more soon.

Great article you got here. I'd like to read more concerning that matter. Thnx for posting this data.Sexy LadyEscorts UK

I sent you an e-mail (guessed at your address) with some extensions to your tristateCheckbox. I just want to be sure that the e-mail reached you.

Cool post as for me. I'd like to read something more about that matter. Thanks for giving that info.With best regards Margo!hotel Kiev escort

I have some jquery functions which change the values of the inputs they get changed, but the images don't refresh until after I mouse over them. Any idea how to get the images to refresh as soon as the value changes?

@4880821313148643569.0

Are the checkboxes on this page working for you? Can you share a demo?

@Shams its up at http://drinkthebeergames.com . For the most part, it is working rather well.

@815809098012590926.0

Basically I have a collection of dynamically loaded independent tri-state checkboxes, and I want to have a the "set all" buttons, but I want them each to be different, and be able to set to the checked/unchecked/ and intermediate. It's in the sidebar here

This comment has been removed by the author.

Is there any way to manually change the status of tristateBoxInput (checkbox image)?I have a reset button which which clears all the checkboxes using javascript. But the state of tristateInputBox remain unchanged?

I tried setting its value to 0 as below.document.getElementById('tristateBoxInput').value=0;alsodocument.getElementById('tristateBoxInput').checked=false;

but these did not change the state of tristateInputBox

Fantastic work Shams! Many thanks. Just wondering - where in the javascript should I add a callback function? I've tried a few places, including the end of updateStateAndImage, and it has broken my app :P if you could help me find the right place I'd really appreciate it. Thanks again for the great work!

@6962107284929336102.0Further to this - tried more ways to introduce a callback to the JS and couldn't manage it. For my app though, adding an onmouseout event to the span element worked.Thanks again Shams!

This comment has been removed by the author.

I recently came across the blog again and remembered I made a prototype version of this, it also supports itself (dependant tri-state elements), anyway here is a link

Hello!!!I need a quad-state checkbox to use on a tree.My tree have to check the root and maintain it checked since the children are checked or not.And if there is a child checked, its father have to be checked and show that there is a child checked in the minimum.Is there a quad-state checkbox with this feature?

@2608207810480042178.0

Can you explain how it is different from the tri-state checkbox that is there currently. What is your fourth state?

The fourth state is a mixed between "clicked" and "maybe".I need to know if a father was clicked and some of his sons didn't.In my system, I can to choose a father, but not necessarily all sons.And I can choose all of his sons, but not him.I will try to make an ascii.