bu1ka/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
.label {
  display: block;
  padding: 10px;
}
.input {
  float: left;
}
</style>
</head>
<body>
  <fieldset class="wrap">
    <label class="label">lorem 01<input type="checkbox" class="input"></label>
    <label class="label">lorem 02<input type="checkbox" class="input"></label>
    <label class="label">lorem 03<input type="checkbox" class="input"></label>
    <label class="label">lorem 04<input type="checkbox" class="input"></label>
    <label class="label">lorem 05<input type="checkbox" class="input"></label>
    <label class="label">lorem 06<input type="checkbox" class="input"></label>
    <label class="label">lorem 07<input type="checkbox" class="input"></label>
    <label class="label">lorem 08<input type="checkbox" class="input"></label>
    <label class="label">lorem 09<input type="checkbox" class="input"></label>
    <label class="label">lorem 10<input type="checkbox" class="input"></label>
  </fieldset>
<script id="jsbin-javascript">
'use strict';

var inputs = document.querySelectorAll('.input');
var wrap = document.querySelector('.wrap');

var lastClicked = null;

wrap.addEventListener('click', function (event) {

  var eTarget = event.target;
  var isShiftPressed = event.shiftKey;
  var isInputClicked = contains(inputs, eTarget);

  if (isInputClicked) {

    if (isShiftPressed) {

      if (lastClicked) {

        console.log(lastClicked);

        var currentClickedInputIndex = getIndex(inputs, eTarget);
        var lastClickedInputIndex = getIndex(inputs, lastClicked);

        var order = [currentClickedInputIndex, lastClickedInputIndex].sort();
        var _inputs = Array.from(inputs);

        var shouldCheck = _inputs.slice(order[0], order[1]);

        console.log('shouldCheck', shouldCheck);

        shouldCheck.length && checkInputs(shouldCheck);
      }
    }

    lastClicked = eTarget;
  }
});

function contains(source, b) {
  return Array.from(source).some(function (part) {
    return part === b;
  });
}

function getIndex(source, b) {
  return Array.from(source).findIndex(function (elem) {
    return elem === b;
  });
}

function checkInputs(inputs) {
  Array.from(inputs).forEach(function (input) {
    return input.checked = true;
  });
}
</script>


<script id="jsbin-source-css" type="text/css">.label
  display: block;
  padding: 10px

.input
  float: left;</script>

<script id="jsbin-source-javascript" type="text/javascript">const inputs = document.querySelectorAll('.input');
const wrap = document.querySelector('.wrap');

let lastClicked = null;


wrap.addEventListener('click', (event) => {

  const eTarget = event.target;
  const isShiftPressed = event.shiftKey;
  const isInputClicked = contains(inputs, eTarget);

  if (isInputClicked) {

    if (isShiftPressed) {

      if (lastClicked) {

        console.log(lastClicked);

        const currentClickedInputIndex = getIndex(inputs, eTarget);
        const lastClickedInputIndex = getIndex(inputs, lastClicked);

        const order = [currentClickedInputIndex, lastClickedInputIndex].sort();
        const _inputs = Array.from(inputs);


        const shouldCheck = _inputs.slice(order[0], order[1]);

        console.log('shouldCheck', shouldCheck);

        shouldCheck.length && checkInputs(shouldCheck);

      }

    }

    lastClicked = eTarget;

  }

});


  function contains(source, b) {
    return Array.from(source).some(part => part === b);
  }

  function getIndex(source, b) {
    return Array.from(source).findIndex(elem => (elem === b));
  }

  function checkInputs(inputs) {
    Array.from(inputs).forEach(input => input.checked=true);
  }
  </script></body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.label {
	display: block;
	padding: 10px;
	}
	.input {
	float: left;
	}
	</style>
	</head>
	<body>
	<fieldset class="wrap">
	<label class="label">lorem 01<input type="checkbox" class="input"></label>
	<label class="label">lorem 02<input type="checkbox" class="input"></label>
	<label class="label">lorem 03<input type="checkbox" class="input"></label>
	<label class="label">lorem 04<input type="checkbox" class="input"></label>
	<label class="label">lorem 05<input type="checkbox" class="input"></label>
	<label class="label">lorem 06<input type="checkbox" class="input"></label>
	<label class="label">lorem 07<input type="checkbox" class="input"></label>
	<label class="label">lorem 08<input type="checkbox" class="input"></label>
	<label class="label">lorem 09<input type="checkbox" class="input"></label>
	<label class="label">lorem 10<input type="checkbox" class="input"></label>
	</fieldset>
	<script id="jsbin-javascript">
	'use strict';

	var inputs = document.querySelectorAll('.input');
	var wrap = document.querySelector('.wrap');

	var lastClicked = null;

	wrap.addEventListener('click', function (event) {

	var eTarget = event.target;
	var isShiftPressed = event.shiftKey;
	var isInputClicked = contains(inputs, eTarget);

	if (isInputClicked) {

	if (isShiftPressed) {

	if (lastClicked) {

	console.log(lastClicked);

	var currentClickedInputIndex = getIndex(inputs, eTarget);
	var lastClickedInputIndex = getIndex(inputs, lastClicked);

	var order = [currentClickedInputIndex, lastClickedInputIndex].sort();
	var _inputs = Array.from(inputs);

	var shouldCheck = _inputs.slice(order[0], order[1]);

	console.log('shouldCheck', shouldCheck);

	shouldCheck.length && checkInputs(shouldCheck);
	}
	}

	lastClicked = eTarget;
	}
	});

	function contains(source, b) {
	return Array.from(source).some(function (part) {
	return part === b;
	});
	}

	function getIndex(source, b) {
	return Array.from(source).findIndex(function (elem) {
	return elem === b;
	});
	}

	function checkInputs(inputs) {
	Array.from(inputs).forEach(function (input) {
	return input.checked = true;
	});
	}
	</script>


	<script id="jsbin-source-css" type="text/css">.label
	display: block;
	padding: 10px

	.input
	float: left;</script>

	<script id="jsbin-source-javascript" type="text/javascript">const inputs = document.querySelectorAll('.input');
	const wrap = document.querySelector('.wrap');

	let lastClicked = null;



	wrap.addEventListener('click', (event) => {

	const eTarget = event.target;
	const isShiftPressed = event.shiftKey;
	const isInputClicked = contains(inputs, eTarget);

	if (isInputClicked) {

	if (isShiftPressed) {

	if (lastClicked) {

	console.log(lastClicked);

	const currentClickedInputIndex = getIndex(inputs, eTarget);
	const lastClickedInputIndex = getIndex(inputs, lastClicked);

	const order = [currentClickedInputIndex, lastClickedInputIndex].sort();
	const _inputs = Array.from(inputs);


	const shouldCheck = _inputs.slice(order[0], order[1]);

	console.log('shouldCheck', shouldCheck);

	shouldCheck.length && checkInputs(shouldCheck);

	}

	}

	lastClicked = eTarget;

	}

	});




	function contains(source, b) {
	return Array.from(source).some(part => part === b);
	}

	function getIndex(source, b) {
	return Array.from(source).findIndex(elem => (elem === b));
	}

	function checkInputs(inputs) {
	Array.from(inputs).forEach(input => input.checked=true);
	}
	</script></body>
	</html>