jQuery Plugin To Create Indeterminate Checkboxes - Tristate

File Size: 8.56 KB
Views Total: 3310
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Create Indeterminate Checkboxes - Tristate

Tristate is a jQuery plugin which makes the normal checkbox have three options: checked, unchecked and indeterminate. The plugin overrides jQuery val() to get/set the current value and also comes with lots of API methods.

How to use it:

1. Load both jQuery library and the jQuery Tristate plugin at the end of the document.

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="jquery.tristate.js"></script>

2. Call the function on the checkbox and done.

<input type="checkbox" class="tristate" value="1"/>
$('.tristate').tristate();

3. Set the initial state to 'indeterminate'.

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

4. Options and defaults.

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

// The value to return for checked state. 
checked:      undefined,

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

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

// Reverse
'reverse':      false,

// true for checked, false for unchecked or null for undeterminate.
state:        undefined,

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

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

5. API methods.

// Either get or set the state of the checkbox.
//  Uses true for checked, false for unchecked or null for indeterminate state.
$tristate.tristate('state', true);

// 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.
$tristate.tristate('value');

6. You can also set the states via html data attributes as follows.

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

Change log:

2017-03-02

  • Added 'reverse' option.

This awesome jQuery plugin is developed by vanderlee. For more Advanced Usages, please check the demo page or visit the official website.