JSFiddle - React, Tailwind, and code Playground

by gena

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="color-table">
  <tr>
      <td>1 <input class="chkbox" type="checkbox" name="number[]" value="1" /></td>
      <td>2 <input class="chkbox" type="checkbox" name="number[]" value="2" /></td>
      <td>3 <input class="chkbox" type="checkbox" name="number[]" value="3" /></td>
      <td>4 <input class="chkbox" type="checkbox" name="number[]" value="4" /></td>
   </tr>
    <tr>
      <td>5 <input class="chkbox" type="checkbox" name="number[]" value="5" /></td>
      <td>6 <input class="chkbox" type="checkbox" name="number[]" value="6" /></td>
      <td>7 <input class="chkbox" type="checkbox" name="number[]" value="7" /></td>
      <td>8 <input class="chkbox" type="checkbox" name="number[]" value="8" /></td>
   </tr>
</table>

CSS

td.checked {
    background: red;
}

JavaScript

$(document).ready(function() {
	var $chkboxes = $('.chkbox');
	var lastChecked = null;
	$chkboxes.click(function(e) {
		if(!lastChecked) {
			lastChecked = this;
			return;
		}
		if(e.shiftKey) {
			var start = $chkboxes.index(this);
			var end = $chkboxes.index(lastChecked);
			$chkboxes.slice(Math.min(start,end), Math.max(start,end)+ 1).prop('checked', lastChecked.checked);
		}
		lastChecked = this;	
	});
	
	var handler = function(event) {
		if(event.target.parentNode.className.indexOf('checked') < 0 ) {
			event.target.parentNode.className += ' checked';
		} else {
			event.target.parentNode.className = event.target.parentNode.className.replace(' checked', '');
		}
	}
	var table = document.getElementById('color-table');
	table.addEventListener('click', handler);
});