JSFiddle - React, Tailwind, and code Playground

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" /><span class="hl"></span></td>
      <td>2 <input class="chkbox" type="checkbox" name="number[]" value="2" /><span class="hl"></span></td>
      <td>3 <input class="chkbox" type="checkbox" name="number[]" value="3" /><span class="hl"></span></td>
      <td>4 <input class="chkbox" type="checkbox" name="number[]" value="4" /><span class="hl"></span></td>
   </tr>
    <tr>
      <td>5 <input class="chkbox" type="checkbox" name="number[]" value="5" /><span class="hl"></span></td>
      <td>6 <input class="chkbox" type="checkbox" name="number[]" value="6" /><span class="hl"></span></td>
      <td>7 <input class="chkbox" type="checkbox" name="number[]" value="7" /><span class="hl"></span></td>
      <td>8 <input class="chkbox" type="checkbox" name="number[]" value="8" /><span class="hl"></span></td>
   </tr>
</table>

CSS

td {
  position: relative;
}
td > .hl {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
}
td > input:checked + .hl {
    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;	
	});
});