JQuery - TriState CheckBox

Question

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.

Answer 1

see my answer to Tri-state Check box in HTML?:

My proposal would be using

• three appropriate unicode characters for the three states e.g. ❓,✅,❌
• a plain text input field (size=1)
• no border
• read only
• display no cursor
• onclick handler to toggle thru the three states

See examples at:

• http://service.bitplan.com/com/bitplan/tristate/tristate.php
• http://jsfiddle.net/wf_bitplan_com/941std72/8/

HTML source:

<input type='text' 
       style='border: none;' 
       onfocus='this.blur()' 
       readonly='true' 
       size='1' 
       value='&#x2753;' onclick='tristate_Marks(this)' />

or as in-line javascript:

<input style="border: none;"
       id="tristate" 
       type="text"  
       readonly="true" 
       size="1" 
       value="&#x2753;"  
       onclick="switch(this.form.tristate.value.charAt(0)) { 
         case '&#x2753': this.form.tristate.value='&#x2705;'; break;  
         case '&#x2705': this.form.tristate.value='&#x274C;'; break; 
         case '&#x274C': this.form.tristate.value='&#x2753;'; 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>

Answer 2

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:

• value: the value that will be entered in the input
• class: css class(es) that the new span will have
• title: an optional title that will be set in the created span

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.