Three States Toggle Switch With jQuery - jQuery jToggler

Three States Toggle Switch With jQuery - jQuery jToggler

The jToggler jQuery plugin converts the normal checkbox into an iOS-style toggle switch that enables the user to select between three options: Checked, Unchecked and Indeterminate.

1. Create a checkbox input with the CSS class of 'jtoggler'.

<input type="checkbox" class="jtoggler">
<input type="checkbox" checked class="jtoggler">
<input type="checkbox" disabled class="jtoggler">
<input type="checkbox" checked disabled class="jtoggler">

2. Add a custom label to the checkbox (OPTIONAL).

<input type="checkbox" class="jtoggler" data-jtlabel="Custom Label">

3. Enable the multi-state functionality on the checkbox (OPTIONAL).

<input type="checkbox" class="jtoggler" data-jtmulti-state>

4. Add the jQuery jToggler plugin and other required resources to the webpage.

<link rel="stylesheet" href="jtoggler.styles.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
<script src="jtoggler.js"></script>

5. Call the function on the checkboxes and done.

$(function(){
  $('.jtoggler').jtoggler();
});

6. Available event handlers which will be fired when the checkbox state changes.

$(document).on('jt:toggled', function(event, target) {
  console.log(event, target);
  console.info($(target).prop('checked'))
});
$(document).on('jt:toggled:multi', function (event, target) {
  console.log(event, target);
  console.info($(target).parent().index())
});

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

  • Publication date: 06.11.2018
  • Source

Whoops, looks like something went wrong.

(1/1) ErrorException

file_put_contents(): Only 0 of 246 bytes written, possibly out of free disk space

in Filesystem.php (line 122)
at HandleExceptions->handleError(2, 'file_put_contents(): Only 0 of 246 bytes written, possibly out of free disk space', '/home/p336588/web/ivanovdmitry.com/public_html/vendor/laravel/framework/src/Illuminate/Filesystem/Filesystem.php', 122, array('path' => '/home/p336588/web/ivanovdmitry.com/public_html/storage/framework/sessions/683SBdlRS8TMLYXW1N1qPI9Sa82pt2QKdRYT2C8R', 'contents' => 'a:3:{s:6:"_token";s:40:"0DyZ8f5pdIPR1l3CVN2Uvi3A3oWxIItdIFnOlFMr";s:9:"_previous";a:1:{s:3:"url";s:88:"http://ivanovdmitry.com/blog/post/three-states-toggle-switch-with-jquery-jquery-jtoggler";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}', 'lock' => true))
at file_put_contents('/home/p336588/web/ivanovdmitry.com/public_html/storage/framework/sessions/683SBdlRS8TMLYXW1N1qPI9Sa82pt2QKdRYT2C8R', 'a:3:{s:6:"_token";s:40:"0DyZ8f5pdIPR1l3CVN2Uvi3A3oWxIItdIFnOlFMr";s:9:"_previous";a:1:{s:3:"url";s:88:"http://ivanovdmitry.com/blog/post/three-states-toggle-switch-with-jquery-jquery-jtoggler";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}', 2)in Filesystem.php (line 122)
at Filesystem->put('/home/p336588/web/ivanovdmitry.com/public_html/storage/framework/sessions/683SBdlRS8TMLYXW1N1qPI9Sa82pt2QKdRYT2C8R', 'a:3:{s:6:"_token";s:40:"0DyZ8f5pdIPR1l3CVN2Uvi3A3oWxIItdIFnOlFMr";s:9:"_previous";a:1:{s:3:"url";s:88:"http://ivanovdmitry.com/blog/post/three-states-toggle-switch-with-jquery-jquery-jtoggler";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}', true)in FileSessionHandler.php (line 83)
at FileSessionHandler->write('683SBdlRS8TMLYXW1N1qPI9Sa82pt2QKdRYT2C8R', 'a:3:{s:6:"_token";s:40:"0DyZ8f5pdIPR1l3CVN2Uvi3A3oWxIItdIFnOlFMr";s:9:"_previous";a:1:{s:3:"url";s:88:"http://ivanovdmitry.com/blog/post/three-states-toggle-switch-with-jquery-jquery-jtoggler";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}')in Store.php (line 128)
at Store->save()in StartSession.php (line 88)
at StartSession->terminate(object(Request), object(Response))in Kernel.php (line 218)
at Kernel->terminateMiddleware(object(Request), object(Response))in Kernel.php (line 189)
at Kernel->terminate(object(Request), object(Response))in index.php (line 58)