Recently I noticed how yahoo mail select all check box only shows two
states 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
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
- Place the related checkboxes inside a container, e.g. a div
- Invoke the initTriStateCheckBox(<place holder id>, <container id>, false) function in your html
Standalone Tri-State Checkbox Demo
Here's what you have to do to create a standalone one:
- 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
- Create a hidden field to hold the state of the box
- Invoke the initTriStateCheckBox(<place holder id>, <hidden field id>, true) function in your html
The zip file containing the javascript, images and a sample is available here. It is also a GitHub project set up by Michal Letynski.
41 comments :
Post a Comment
damn firebug gave it all away :D
I have updated the post to include an example of a standalone one also now :)
function changeCheckboxState(chk) {
var img = byId(chk.id);
var src = img.src.substring(img.src.lastIndexOf("/") + 1);
if (checkboxImages[0] == src) {
byId("_" + chk.id).value = "";
img.src = checkboxImagesPath + checkboxImages[1];
} else if (checkboxImages[1] == src) {
byId("_" + chk.id).value = "true";
img.src = checkboxImagesPath + checkboxImages[2];
} else {
byId("_" + chk.id).value = "false";
img.src = checkboxImagesPath + checkboxImages[0];
}
}
<img id="id" src="/demo/images/unchecked.gif" onclick="changeCheckboxState(this)" /><input id="_id" type="hidden" value="false" />
So thanks for the work! I was looking for a similar workaround so it came handy ;-)
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 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.
What modifications would need to be done?
I 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.
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
Salam ziarah dari saya,,blog yang menarik ,jemput muzakarah di blog saya….dan jadikan blog saya sebagai rakan anda..tq
agreed.
sorry for the late reply. feel free to email me explaining the problem ur facing
sure go ahead. fearphage had a suggestion about using sprites. maybe you can implement that too to save on requests to load the image
yeah, I saw that sprite suggestion and looked into it a while back but probably won't be doing it this iteration. Thanks!
Sexy Lady
Escorts 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.
I'd like to read something more about that matter.
Thanks for giving that info.
With best regards Margo!
hotel Kiev escort
Are the checkboxes on this page working for you? Can you share a demo?
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
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;
also
document.getElementById('tristateBoxInput').checked=false;
but these did not change the state of tristateInputBox
Further 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!
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?
Can you explain how it is different from the tri-state checkbox that is there currently. What is your fourth state?
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.
[x] - Checked
[-] - Maybe
[ ] - Unchecked
[+] - Mix between Checked and Maybe.
[+] Father choosen
| - [ ] Son not choosen
| - [x] Son choosen
[-] Father not choosen
| - [x] Son choosen
| - [x] Son choosen.
All choosen.
[x]
| - [x]
| - [x]
Nobody choosen is easy to see.
Thanks
I think you can add the father as an independent tri-state checkbox. Then it can be in any of the three states irrespective of the state of the 'son' checkboxes.
See this, please. http://www.indigorose.com/webhelp/vp/Program_Reference/Misc/Quad-state_Check_Box.htm
The father needs to know a state of his sons.
[ ]
- [ ]
- [ ]
- [ ]
If I check top level check box all children change their states to checked, but top level check box Value field still have zero value.
topLevel.Value = 0
I must say it's a sly implementation :-D Was really got me thinking about from where the intermediate box was displaying... and a inspecting it with the firebug explained all the tricks :-D
damn firebug gave it all away :D
Very interesting. I would like to see an implementation that does not need child nodes at all and it just cycles through the states on a click
I have updated the post to include an example of a standalone one also now :)
I've compiled an alternative (following a simple naming convention) to include it in IWebMvc2:
function changeCheckboxState(chk) {
var img = byId(chk.id);
var src = img.src.substring(img.src.lastIndexOf("/") + 1);
if (checkboxImages[0] == src) {
byId("_" + chk.id).value = "";
img.src = checkboxImagesPath + checkboxImages[1];
} else if (checkboxImages[1] == src) {
byId("_" + chk.id).value = "true";
img.src = checkboxImagesPath + checkboxImages[2];
} else {
byId("_" + chk.id).value = "false";
img.src = checkboxImagesPath + checkboxImages[0];
}
}
<img id="id" src="/demo/images/unchecked.gif" onclick="changeCheckboxState(this)" /><input id="_id" type="hidden" value="false" />
So thanks for the work! I was looking for a similar workaround so it came handy ;-)
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.
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.
What modifications would need to be done?
I 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.
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.
agreed.
“Dan orang-orang yang beriman dan berhijrah serta berjihad pada jalan Allah (untuk membela Islam) dan orang-orang (Ansar) yang memberi tempat kediaman dan pertolongan (kepada orang-orang Islam yang berhijrah itu), merekalah orang-orang yang beriman dengan sebenar-benarnya. Mereka beroleh keampunan dan limpah kurnia yang mulia.” (Al-Anfaal 8:74)
Salam ziarah dari saya,,blog yang menarik ,jemput muzakarah di blog saya….dan jadikan blog saya sebagai rakan anda..tq
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
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
sure go ahead. fearphage had a suggestion about using sprites. maybe you can implement that too to save on requests to load the image
yeah, 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 Lady
Escorts UK
uh. thank you for this style )
Hi Shams,
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?
Are the checkboxes on this page working for you? Can you share a demo?
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
@Shams its up at http://drinkthebeergames.com . For the most part, it is working rather well.
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;
also
document.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!
Further 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?
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.
[x] - Checked
[-] - Maybe
[ ] - Unchecked
[+] - Mix between Checked and Maybe.
[+] Father choosen
| - [ ] Son not choosen
| - [x] Son choosen
[-] Father not choosen
| - [x] Son choosen
| - [x] Son choosen.
All choosen.
[x]
| - [x]
| - [x]
Nobody choosen is easy to see.
Thanks
I think you can add the father as an independent tri-state checkbox. Then it can be in any of the three states irrespective of the state of the 'son' checkboxes.
Almost.
See this, please. http://www.indigorose.com/webhelp/vp/Program_Reference/Misc/Quad-state_Check_Box.htm
The father needs to know a state of his sons.
There are some problem with IE8. I have this structure:
[ ]
- [ ]
- [ ]
- [ ]
If I check top level check box all children change their states to checked, but top level check box Value field still have zero value.
topLevel.Value = 0
In IE10 the behavior was reverted back to the IE8 behavior and onerror should will always be called.”psd to wordpress
Post a Comment