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

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