Shift to select checkboxes

Yii 2.0 General Discussions
1

Hi,

This script works only once. I don’t know why?

I’ve added the script like so:

view/index.php:

<?

$this->registerJsFile(’/js/shiftselect.js’, [‘depends’ => [\yii\web\JqueryAsset::className()]], View::POS_END, ‘my-options1’);

?>




var lastChecked = null;

var handleChecked = function(e) {

    if(lastChecked && e.shiftKey) {

    

    var i = $('input[type="checkbox"]').index(lastChecked);

	var j = $('input[type="checkbox"]').index(e.target);

	var checkboxes = [];

	

	if (j > i) {

	    checkboxes = $('input[type="checkbox"]:gt('+ (i-1) +'):lt('+ (j-i) +')');

	} else {

	    checkboxes = $('input[type="checkbox"]:gt('+ j +'):lt('+ (i-j) +')');

	}

 

	if (!$(e.target).is(':checked')) {

	    $(checkboxes).removeAttr('checked');

	} else {

	    $(checkboxes).attr('checked', 'checked');

	}

    


	lastChecked = null;

	e.shiftKey = null;


    }




    lastChecked = e.target;

    //lastChecked = null;

 

    // Other click action code.

}


$('input[type=checkbox]').click(handleChecked);

I’ve tried other scripts:

http://nylen.github.io/shiftcheckbox/

But they don’t work at all for me…

I don’t know why either…

2

Maybe the JS file is not loaded.

Make sure the baseUrl appears in the URL :




//@web alias added

$this->registerJsFile('@web/js/shiftselect.js', ['depends' => [\yii\web\JqueryAsset::className()]], View::POS_END, 'my-options1');
3

Fixed it. :D




// Add this to your view index file:


<? 

$this->registerJsFile('/js/shiftselect.js', ['depends' => [\yii\web\JqueryAsset::className()]], View::POS_END, 'my-options1');

?>




/* /js/shiftselect.js */

/* original by

Copyright (c) 2012 Alfredo Berumen Saldivar 

http://berumen.pw 

@berumen

*/


(function($) {

	$.fn.tshift = function() 

	{

		var start = 0;

		//var checkboxes = $('input[type="checkbox"]' +" :checkbox");

		var checkboxes = $('input[type="checkbox"]');

	    checkboxes.on("click", function(event)

		{

			if(this.checked)

			{

				if(event.shiftKey)

				{

  	 				end = checkboxes.index(this);

  	 				if(end < start)

  	 				{

 						end   = start;

 						start = checkboxes.index(this);

  	 				}

					checkboxes.each(function(index) {

						if (index >= start && index < end)

						{

							this.checked = true;

						}

					});

				}

				start = checkboxes.index(this);

			}

		});

		return this;

	};

})(jQuery);


  $(document).ready(function() {

        $('input[type="checkbox"]').tshift();

    });