Get new jQuery plugins just once a week

×

Tristate

December 23, 2014

jQuery standalone tristate (indeterminate) checkbox

Tristate is a jQuery standalone tristate (indeterminate) checkbox with pseudo selectors and optional value modification and .val() overwrite.

Created by Martijn van der Lee

Download

Example

Tristate jQuery plugin

triple states

jQuery Tristate

Version 1.2.1

Copyright © 2013-2017 Martijn van der Lee. MIT Open Source license applies.

Based on work by Chris Coyier (http://css-tricks.com/indeterminate-checkboxes/)

jQuery tristate (indeterminate) checkbox with pseudo selectors and optional value modification and .val() overwrite.

Features

Changelog

Version 1.2.1

Version 1.2

Version v1.1

Download

jQuery v1.6.2 or higher required. (Will not work with v1.6.1 or before).

Current version: https://github.com/vanderlee/tristate/archive/master.zip

Sourcecode on Github: https://github.com/vanderlee/tristate

Browser support

Tested with v1.2.1

Quick start

The following code quickly shows you how to use the tristate plugins.

There are multiple ways to use tristate, you should look at the included examples to learn the way you prefer.

<input type="checkbox" class="tristate"/>
<input type="checkbox" class="tristate" checked="checked"/>
<input type="checkbox" class="tristate" indeterminate="1"/>

<script>
    $(function() {
        $('.tristate').tristate({
            change: function(state, value) {
                console.log('Input:', this);
                console.log('Unknown?', state === null);
                console.log('Known?', state !== null);
                console.log('Checked?', state === true);
                console.log('Unhecked?', state === false);
            }
        });
    });
</script>

Usage Notes

Documentation

.tristate(options)

Turn a normal checkbox input into a tristate input.

Options

true for checked, false for unchecked or null for undeterminate.

Set the value in order to set the state. Only works if values are specified for checked, unchecked and/or indeterminate.

The value to return for checked state. If not specified, the value in the value attribute is returned.

The value to return for unchecked state. If not specified, the value in the value attribute is returned.

The value to return for indeterminate state. If not specified, the value in the value attribute is returned.

Events

Triggered upon initialization. State can be true, false or null. Value is the value as it would be returned from .val().

Triggered whenever the state changes. State can be true, false or null. Value is the value as it would be returned from .val().

Methods

Either get or set the state of the checkbox. Uses true for checked, false for unchecked or null for indeterminate state.

Get the current value or set the state by specifying the value. Setting the value only works if you have specified values (either using expando attributes or options) for the different states.

.val()

Overwrites the normal val() method for tristate controls. Returns the value or the value connected to the state if specified. Behaviour for controls other that tristate controls is unmodified.

:tristate pseudo selector

Selects only tristate inputs

:determinate pseudo selector

Selects only those tristate inputs with a determinate (either checked or unchecked) state.

:indeterminate pseudo selector

Selects only those tristate inputs with an indeterminate (neither checked nor unchecked) state.

HTML attributes

You can control the behaviour of the tristate input using HTML expando (non- standard) attributes. Any current browser will handle these perfectly well.

<input type="checkbox" indeterminate="indeterminate"
                        checkedvalue="Yes"
                        uncheckedvalue="No"
                        indeterminatevalue="Maybe"/>

indeterminate="indeterminate"

You can use a indeterminate attribute to specify the default state as such.

The plugin itself may set and remove this attribute as the state changes.

checkedvalue

Sets the value returned if checked.

uncheckedvalue

Sets the value returned if unchecked.

indeterminatevalue

Sets the value returned if indeterminate.

Tristate

Related posts:

Super-Labels
Nod
Fancyselect
Tristate jQuery plugin

http://jquer.in/wp-content/uploads/2014/12/Tristate.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever