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.
21 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!
Post a Comment