We help IT Professionals succeed at work.

Three-State Checkbox

gdemaria
gdemaria asked
on
4,793 Views
Last Modified: 2012-08-14
I would like to have a "three-state checkbox"    Checked, Unchecked or Mixed.

I realize checkboxes themselves cannot do this, so I am wondering what javascript experts may suggest as a good approach.

My use for it is a row-heading checkbox, if checked, all checkboxes in the row will be checked, if not checked, all will be unchecked and if clicked again, the checkboxes of the row will return to default (starting) values.  I already have the code to update all the checkboxes of the row, I am just trying to figure out what object to use and how to code the changes to that object (an image perhaps?)  I don't really have room for a select box.
Comment
Watch Question

ZvonkoSystems architect
CERTIFIED EXPERT
Top Expert 2006

Commented:
What does mean "if clicked again, the checkboxes of the row will return to default (starting) values. "?
Are the "starting" values the values from page load or from last state before the row/column checkboxed changed the state?

CERTIFIED EXPERT

Author

Commented:
Hello again Zvonko,
It means default (starting) values.

As I mentioned, I already have the code (thanks to your help) to toggle between the three states that I am seeking.  In this question I am focusing on how to do the interface aspect.  I am seeking either an image or checkbox or button that is fairly small (16x16) that I can show the three different states and each time its clicked I can send to my (already existing) script to change the state of all the checkboxes in the row.

Thanks!

Commented:
An idea:  Use 2 coordinated checkboxes.

Start with box1 checked and box2 unchecked = original state

In original state, if user clicks box2 so that both boxes are checked = check all state
In original state, if If user clicks box1 so that neither box is checked = check none state

In check all state, if user clicks box2 so that only box1 is checked = original state
In check all state, if user clicks box1 then programatically clear box2 so that both boxes are unchecked = check none state.

In check none state, if user clicks on box1 so that only box1 is checked = original state
In check none state, if user clicks on box2 then programatically check box1 so that both boxes are checked = check all state.

The user has 3 states that are reachable, and from any state they can get to either of the other 2 with a single click.

Box1 controls the row items that were originally checked.  When box1 is checked, the original checks in the row are checked.  When box1 is unchecked the original checks in the row are unchecked.

Box2 controls the items in the row that were originally unchecked.  When box2 is checked the items in the row that were originally unchecked get checked.  When box2 is unchecked the items in the row that were originally checked get unchecked.

Commented:
If you simply allow the 2 checkboxes to work independently, you have 4 states with the extra one allowing the user to reverse the original state of the check marks in the row:

box1 is checked, box2 is unchecked = original state of mixed checks within the row
box1 is unchecked, box2 is unchecked = uncheck all
box1 is unchecked, box2 is checked, = reverse original state (uncheck the original checks, and check the original unchecks)
box 1 is checked, box2 is checked = check all

This depends on being able to track which items were checked originally and which items were unchecked originally.  I don't know how practical that is to do, but it sounds like you may already have that figured out.

Commented:
The 3 state approach may be better though since the user can move to any other state in one click.  The second approach using 4 states can require 2 clicks, say to go from "check none" to "check all".
Systems architect
CERTIFIED EXPERT
Top Expert 2006
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Top Expert 2007

Commented:
Use a button to toggle through the tri-states and change the caption to indicate the current state:

<input id="btnState" value="Checked" onclick="toggleState(this);"></input>

<script type="text/javascript">
var tristate = 0;
var tristates = ["Checked","Unchecked","Mixed"];
function toggleState(btn)
{
    tristate = (++tristate) % 3; // tristates range from 0 to 2
    if (btn.value = tristates[tristate]; // change the button caption
}
</script>

You can do whatever you need to from within the 'toggleState' function.
, Unchecked or Mixed
Top Expert 2007
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
CERTIFIED EXPERT

Author

Commented:
Great reponses, thanks very much!

wytcom, Thanks for your idea.  I think 2 checkboxes would be really confusing for the user, and as you say, there is an extra state that would have no meaning.  But I will keep in mind for future uses!

Zvonko, great idea.  The three states of a checkbox are: checked, unchecked and unchecked with a border.  Looks good, makes sense. I used this solution.

Badotz, very clean/clever solution.   I will hold on to this when I use a button for things.  In this case, space is an issue so a checkbox or image works best.  
Top Expert 2007

Commented:
No worries - glad to help.
ZvonkoSystems architect
CERTIFIED EXPERT
Top Expert 2006

Commented:
You are welcome.

One additional matter to be aware of: counting trough the button states by 1, 2, 3 does make sense for button but not for the concerned row data. My approach slightly keeps an eye on the row data state to act on mixed checked data always with state 1 without keeping button state in mind. Because between clicking the button the user can independently change the checkbox states.



Top Expert 2007

Commented:
Zvonko: True, but couldn't you manipulate the checkboxes when the button state changed, as well as "remembering" which checkboxes were checked between state changes?
ZvonkoSystems architect
CERTIFIED EXPERT
Top Expert 2006

Commented:
Such "StateMashine" would be far beyond the purpose of helping user to check and uncheck rows.
The control element "state" like checkAll and uncheckAll and resetDefault are "next" posible states which loos their meanings when user changes one checkbox in that row. So the "state" should be recalculated for every control element after every checkbox change. For example after checking all checkboxes in a row should the control element for that row be in the uncheckAll command state. That is nearly complex as a graphic engine editor. And that all to switch checkboxes on and off!?!
 
CERTIFIED EXPERT

Author

Commented:
In my implementation, I chose not to have the controling checkbox attempt to keep track of changes within the row and auto-correct itself based on those changes.  In short, if the user checks it, all boxes become checked, unchecks it, all get unchecked.  On the third check, all go back to their starting values.

I realize that attempting this syncrhonization would require a fourth state which would be "none-of-the-above". The four states would be as follows:

  All checked,
  All unchecked
  All at initial values
  User made changes and none of the above are true

Top Expert 2007

Commented:
Checkbox state can be viewed as as 1 (on) or 0 (off), so storing prior states in a JSON object would  be straightforward, but it *might* be overkill ;-)

var check_box = {"state":
  [
    {"cbox_id": "1", "states": []},
    {"cbox_id": "2", "states": []},
    {"cbox_id": "n", "states": []}
  ]
};



var myJSONObject = {"bindings":
  [
    {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},
    {"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},
    {"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}
  ]
};

JSON members can be retrieved using dot or subscript operators:

var initial_state_for_chkbox0 = check_box.state[0].states[0];
CERTIFIED EXPERT

Author

Commented:
Also note that defaultchecked is an attribute of a checkbox.  It holds the value of the checkbox when the page is loaded.  
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.