I'm trying to find a tri-state checkbox plugin. However, every plugin I find relies on a hierarchy (like a folder structure) of elements. I just have a single checkbox element that I want to make a three-way checkbox.
Does anyone know of a jquery plugin that will do this? I'm really surprised I didn't find one that works on http://plugins.jquery.com/.
Thank you for your input.
Some of these answers are a bit out of date since jQuery redid their plugin site.
"Tristate" (indeterminate) checkboxes are built right into JavaScript, and it's easy to set them into that state by simply setting a property on them. More info: http://css-tricks.com/indeterminate-checkboxes/
$("#some-checkbox").prop("indeterminate", true);
There's a plugin available here on the new jQuery plugin site that provides that functionality: http://plugins.jquery.com/tristate-checkbox/
The three states are checked, unchecked, and indeterminate. It provided indeterminate state depending on whether all the child checkboxes are checked or not.
I came across the same issue - i needed it to show: enable/disable/ignore
Based on the icons available in jquery ui (http://jqueryui.com/themeroller/) I created following code (I know its not a plugin, but that wasnt necessary in my case):
The HTML I use is:
<input type="text" class="rotatestate" value="true"
data-state-style="cursor:pointer"
data-state-class="ui-icon"
data-state-values='[{"value":"true","class":"ui-icon-check","title":"title for true"},{"value":"false","class":"ui-icon-radio-off","title":"title for off"},{"value":"null","class":"ui-icon-cancel","title":"title for third state"}]'/>
The control takes the json array in data-state-values for as many states as you want to rotate through:
It basically creates a <span class="data-state-class + classOfState" title="titleOfState"> element and on click updates it by cacling through the given value list.
I coded it so it even allows change through other means (i.e. setting the value of the input directly) and updates the "control" when the $("input").change(); event is triggered.
The jquery code that handles it:
/* rotatestate stontrol */
$("input.rotatestate", location).each(function(){
var states = $(this).attr("data-state-values");
var defaultClass = $(this).attr("data-state-class");
// no need to continue if there are no states
if(!states) {
return;
}
try {
states = JSON.parse(states);
} catch (ex) {
// do not need to continue if we cannot parse the states
return;
}
var stateControl = $("<span></span>");
if($(this).attr("data-state-style")) {
stateControl.attr("style", $(this).attr("data-state-style"));
}
stateControl.data("states", states);
stateControl.data("control", this);
stateControl.data("activeState", null);
$(this).data("control", stateControl);
if(defaultClass) {
stateControl.addClass(defaultClass);
}
// click on the control starts rotating
stateControl.click(function(){
var cState = $(this).data().activeState;
var cStates = $(this).data().states;
var control = $(this).data().control;
var newState = null;
if(cState != null) {
// go to the 'next' state
for(var i = 0; i < cStates.length; i++) {
if(cStates[i].value === cState.value) {
// last element
if(i === cStates.length - 1) {
newState = cStates[0];
} else {
newState = cStates[i+1];
}
break;
}
}
} else {
// no state yet - just set the first
newState = cStates[0];
}
$(control).attr("value", newState.value);
// trigger change
$(control).change();
});
// make sure to update state if the value is changed
$(this).change(function(){
var control = $($(this).data().control);
var cState = control.data().activeState;
var cStates = control.data().states;
if(cState != null) {
// remove "old state"
control.removeClass(cState['class']);
}
// add new State
var val = $(this).val();
$.each(cStates, function(){
if(this.value === val) {
control.data().activeState = this;
if(this.title) {
control.attr("title", this.title);
}
control.addClass(this['class']);
return false;
}
});
});
// trigger initial state
$(this).change();
$(this).after(stateControl);
$(this).hide();
});
The control is also part of my Form Controls Library on https://github.com/corinis/jsForm/wiki/Controls.
The post is a bit old but, here https://gist.github.com/2886026
I've modified this plugin to do so:
http://webworld-develop.blogspot.com.br/2011/04/small-and-quick-tri-state-checkbox.html
see my answer to Tri-state Check box in HTML?:
My proposal would be using
See examples at:
HTML source:
<input type='text'
style='border: none;'
onfocus='this.blur()'
readonly='true'
size='1'
value='❓' onclick='tristate_Marks(this)' />
or as in-line javascript:
<input style="border: none;"
id="tristate"
type="text"
readonly="true"
size="1"
value="❓"
onclick="switch(this.form.tristate.value.charAt(0)) {
case '❓': this.form.tristate.value='✅'; break;
case '✅': this.form.tristate.value='❌'; break;
case '❌': this.form.tristate.value='❓'; break;
};" />
Javascript source code:
<script type="text/javascript" charset="utf-8">
/**
* loops thru the given 3 values for the given control
*/
function tristate(control, value1, value2, value3) {
switch (control.value.charAt(0)) {
case value1:
control.value = value2;
break;
case value2:
control.value = value3;
break;
case value3:
control.value = value1;
break;
default:
// display the current value if it's unexpected
alert(control.value);
}
}
function tristate_Marks(control) {
tristate(control,'\u2753', '\u2705', '\u274C');
}
function tristate_Circles(control) {
tristate(control,'\u25EF', '\u25CE', '\u25C9');
}
function tristate_Ballot(control) {
tristate(control,'\u2610', '\u2611', '\u2612');
}
function tristate_Check(control) {
tristate(control,'\u25A1', '\u2754', '\u2714');
}
</script>
Try this plugin,http://plugins.jquery.com/project/tristate-checkbox
I run across this two-liner from https://css-tricks.com/indeterminate-checkboxes/
$('#some_div').on('click','input[type=checkbox]', function(){
if (this.readOnly) this.checked=this.readOnly=false;
else if (!this.checked) this.readOnly=this.indeterminate=true;
});
I am usint this on https://github.com/zevero/jquery-checkbox-table which will be available later this day.
