Three State Toggle Switch Plugin With jQuery - theswitch

Three State Toggle Switch Plugin With jQuery - theswitch

The theswitch jQuery plugin lets you create minimal clean toggle switches that support indeterminate state (tri-state) based on the normal checkbox element.

See also:

How to use it:

1. Download and put the minified version of the theswitch plugin after jQuery.

<script src="" 
<script src="jquery.theswitch.min.js"></script>

2. Create a container to hold the toggle swtich.

<div id="example"></div>

3. Call the function on the container element to generate a basic toggle switch.


4. Set the initial state of the toggle switch. Default: 'noset' (indeterminate).

  action: 'off'
  action: 'on'

5. To disable the indeterminate state, set the step size to 2.

  steps: 2,
  action: 'off'

6. Get the current value of the toggle switch.

  // do something

7. More configuration options to customize the toggle swtich.

  // background colors
  bgOn: '#4da154',
  bgNoSet: '#f1f1f1',
  bgOff: '#d82c2c',
  // width
  width: 60,
  // height
  height: 14, 
  // uses percentage
  porcent: false,
  // on/off labels
  onLabel: '●',
  offLabel: '●',
  // handler height
  hsize: 11,
  // is disabled?
  disabled: false

8. Available events which will be fired when the toggle switch changes state.

  onSet: function(e) {},
  onClickOn: function(e) {},
  onClickNoSet: function(e) {},
  onClickOff: function(e) {}

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

  • Publication date: 19.02.2019
  • Source