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
Post a Comment