Go to this fiddle

The defaults

On Off

The code the defaults

<select>
  <option value="1">On</option>
  <option value="0">Off</option>
</select>

$('select').switchify();

Custom values/labels

True False

The code custom values/labels

<select>
  <option value="a">True</option>
  <option value="b">False</option>
</select>

$('select').switchify();

Respect initial value

On Off

The code respect initial value

<select>
  <option value="1">On</option>
  <option value="0" selected="selected">Off</option>
</select>

$('select').switchify();

Override defaults

Off On

The code override defaults

<select>
  <option value="0">Off</option>
  <option value="1">On</option>
</select>

$('select').switchify({ on: '1', off: '0' });

Respect initial state

On Off

The code respect initial state

<select disabled="disabled">
  <option value="1">On</option>
  <option value="0">Off</option>
</select>

$('select').switchify();

Multiple switches

On Off On Off

The code multiple switches

<select>
  <option value="1">On</option>
  <option value="0">Off</option>
</select>

<select>
  <option value="1">On</option>
  <option value="0">Off</option>
</select>

$('select').switchify();

Event driven

On Off

The code event driven

<select>
  <option value="1">On</option>
  <option value="0">Off</option>
</select>

$('select').switchify().data('switch').bind('switch:slide', function(e, type) {
  e.preventDefault(); // cancel the default slide action
  $('.events').append('<li>Preparing to slide to "' + type + '" position</li>');
  var answer = confirm('Switch to the "' + type + '" position?');
  if (answer) {
    $('.events').append('<li>Sliding to "' + type + '" position</li>');
    var controls = $(this).data('controls');
    // manually perform the slide action, but without triggering the 'switch:slide' event again
    controls[type]({ silent: true });
  } else {
    $('.events').append('<li>Cancelled slide to "' + type + '" position<li>');
  }
});

select { display: inline !important; }

API controls

On Off

Switch on | Switch off | Toggle

The code api controls

<select id="api-select">
  <option value="1">On</option>
  <option value="0">Off</option>
</select>

<p>
  <a href="#" class="api" data-action="on">Switch on</a> |
  <a href="#" class="api" data-action="off">Switch off</a> |
  <a href="#" class="api" data-action="toggle">Toggle</a>
</p>

$('select').switchify();

$('.api').click(function(e) {
  e.preventDefault();
  var self = $(this),
      $switch = $('#api-select').data('switch'),
      controls = $switch.data('controls');

  controls[self.attr('data-action')]();
});

Keyboard support

Click here, press tab to focus on the switch, then hit enter to toggle

On Off

The code keyboard support

<p><a href="#" class="focus">Click here, press <code>tab</code> to focus on the switch, then hit <code>enter</code> to toggle</a></p>
              
<select>
  <option value="1">On</option>
  <option value="0">Off</option>
</select>

$('select').switchify();

$('.api-keyboard-focus').click(function(e) {
  e.preventDefault();
  $(this).focus();
});