Tshift

A simple way to use shift selection for your checkboxes

Download .zip Download .tar.gz View on GitHub

tShift, What is this?

tShift is a jquery plugin that allows you to use shift selection in your checkboxes.
It was built using the jQuery library.

Author

Copyright (c) 2012 Alfredo Berumen Saldivar
http://berumen.pw
@berumen

How to use

Include tShift plugin in your website directory then load files in the

section of your HTML document. Don't forget to add the jQuery library version 1.9+.
<head>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="/jquery.tshift.min.js"></script>
</head>

Just put your checkbox list inside a div with an id, use whatever name you wish for the id. You can use nested divs inside your main div. For example:

<div id="my_id">
    <fieldset style="width: 5%">
    <legend>Select</legend>
        <input type="checkbox" name="my_name[]" value="1" />1
        <div>
          <input type="checkbox" name="my_name[]" value="2" />2
        </div>
        <input type="checkbox" name="my_name[]" value="3" />3
        <input type="checkbox" name="my_name[]" value="4" />4
        <input type="checkbox" name="my_name[]" value="5" />5
    </fieldset>
</div>

Trigger the plugin using the following code:

<script>
    $(document).ready(function() {
        $('#my_id').tshift();
    });
</script>

Example

For a live demonstration visit: tShift demo

Or visit the official web page: Official site

License

Licensed under MIT license

Supported Browsers

Chrome
Safari 6.02+
Firefox 17+
IE 7+
Opera 12.11+

Bug tracker

Have a bug? Please create an issue on GitHub at:
https://github.com/berumen/tShift/issues