JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<div id="cbc"></div>

JavaScript

var lastidx = -1;
		for(let i = 1; i <= 100; i++){
			var cbh = document.getElementById('cbc');
			 var cb = document.createElement('input');
			 cb.type = 'checkbox';
			 cb.name = 'box'+i;
			 cb.value = i;
			 cb.className = 'box';
			 cb.id = 'box'+i;
			 cbh.appendChild(cb);
			 cb.addEventListener("click", function(event) {
                if (!event.shiftKey) {
                    lastidx = i;
				} else {
					var status = document.getElementById('box' + lastidx).checked;
					console.log("status");
					if (lastidx < i) {
						var from = lastidx;
						var to = i;
					} else {
						var from = i;
						var to = lastidx;
					}
					for (var j = from; j < to; j++) {
						document.getElementById('box' + j).checked = status;
					}
				}
			 });
		 }