JQuery click + shift button for selecting group of checkboxes as desktop application

Click start checkox and then click + shif button on end checkbox

<!doctype html>
 <html lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>JQuery checkbox click + shift</title>
<style>
 table tr td input.selected {
 outline-color:#6CF;
 outline-style:solid;
 outline-width:thin
}
 </style>
 <script type="text/javascript" src="jquery-1.7.1.min.js" charset="utf-8"></script>
 <script type="text/javascript" src="jquery-ui-1.8.17.custom.min.js" charset="utf-8"></script>

<script type="text/javascript">
 $(document).ready(function() {
 TABLE.selectable('#contacts');
 });

var TABLE = {};

TABLE.selectable = function(table) {
    var $tables = $(table);

    $tables.each(function () {
        var _table = $(this);
/*
//        _table
//            .find('thead tr th:nth-child(1)')
//            .before($('<th><input id="checker" type="checkbox" value="Select" /></th>'));
//        _table
//            .find('tbody tr td:nth-child(1)')
//            .before($('<td><input type="checkbox" value="Select" /></td>'));
*/
        var chkSelector = 'tr td:nth-child(1) :checkbox';
        //--- this one if you put in class for each checkbox class="checbox"
        //var chkSelector = '.checkbox';

        $('#checker').click(function() {
            _table.find(chkSelector)
                .prop('checked', $(this).prop('checked'));        
        });

        _table.find(chkSelector).click(function(e) {
            var $table = $(this).parents('table');
            var lastRow = $table.data('lastRow');
            var lastIndex = $table.data('lastIndex');

            var thisRow = $(this).parents('tr').index();

            //---THIS INDEX
            var str = $(this).attr('index');
            //var pos = str.lastIndexOf('_');
            var thisIndex = parseInt(str);
            //str = str.substring(0,pos+1) + str.substring(pos+1)

            var checked = $(this).prop('checked');

            _table.find(chkSelector).removeClass('selected');
            $(this).addClass('selected');

            //if(lastRow !== undefined && e.shiftKey) {
            if(lastIndex !== null && e.shiftKey) {                
                var numChecked = 0;
                //var start = lastRow < thisRow ? lastRow : thisRow;
                //var end = lastRow > thisRow ? lastRow : thisRow;

                var start = lastIndex < thisIndex ? lastIndex : thisIndex;
                var end = lastIndex > thisIndex ? lastIndex : thisIndex;

                $table
                    .find(chkSelector)
                    .slice(start, end + 1)
                    .prop('checked', checked);

//                var $list =    $table
//                    .find(chkSelector);
//                alert($list.length);
//                alert($list.slice(start, end + 1).prop('checked', checked).length);
            }
            $table.data('lastRow', thisRow);
            $table.data('lastIndex', thisIndex);

        });
    });
}
</script>
</head>

<body>
  <table id="contacts" style="border-collapse:collapse" border="1" cellpadding="5" align="center">
    <thead>
      <tr>
        <th><input id="checker" type="checkbox" value="1" /></th>
        <th>Contact</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" value="1" index="0" /></td>
        <td>Mike Brown</td>
      </tr>
      <tr>
        <td><input type="checkbox" value="1" index="1" /></td>
        <td>Chris Mullin</td>
      </tr>
      <tr>
        <td><input type="checkbox" value="1" index="2" /></td>
        <td>Scottie Pippen</td>
      </tr>
      <tr>
        <td><input type="checkbox" value="1" index="3" /></td>
        <td>Micheal Jordan</td>
      </tr>
      <tr>
        <td><input type="checkbox" value="1" index="4" /></td>
        <td>Grant Hill</td>
      </tr>
      <tr>
        <td><input type="checkbox" value="1" index="5" /></td>
        <td>Alonso Mourning</td>
      </tr>  
      <tr>
        <td><input type="checkbox" value="1" index="6" /></td>
        <td>David Rivers</td>
      </tr>  
      <tr>
        <td><input type="checkbox" value="1" index="7" /></td>
        <td>Carlton Myers</td>
      </tr>                                          
    </tbody>
  </table>
</body>
</html>
This entry was posted in checkbox, JQuery and tagged , , , . Bookmark the permalink.

2 Responses to JQuery click + shift button for selecting group of checkboxes as desktop application

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s