JSFiddle - React, Tailwind, and code Playground

HTML

<div class="float:left">
    <input type = "checkbox" id = "checkAll">Check All</input>
</div>
<div class="float:left">
    <input type = "checkbox">1</input>
</div>
<div class="float:left">
    <input type = "checkbox">2</input>
</div>
<div class="float:left">
    <input type = "checkbox">3</input>
</div>
<div class="float:left">
    <input type = "checkbox">4</input>
</div>
<div class="float:left">
    <input type = "checkbox">5</input>
</div>
<div class="float:left">
    <input type = "checkbox">6</input>
</div>
<div class="float:left">
    <input type = "checkbox">7</input>
</div>
<div class="float:left">
    <input type = "checkbox">8</input>
</div>
<div class="float:left">
    <input type = "checkbox">9</input>
</div>
<div class="float:left">
    <input type = "checkbox">10</input>
</div>
<div class="float:left">
    <input type = "checkbox">1</input>
</div>
<div class="float:left">
    <input type = "checkbox">2</input>
</div>
<div class="float:left">
    <input type = "checkbox">3</input>
</div>
<div class="float:left">
    <input type = "checkbox">4</input>
</div>
<div class="float:left">
    <input type = "checkbox">5</input>
</div>
<div class="float:left">
    <input type = "checkbox">6</input>
</div>
<div class="float:left">
    <input type = "checkbox">7</input>
</div>
<div class="float:left">
    <input type = "checkbox">8</input>
</div>
<div class="float:left">
    <input type = "checkbox">9</input>
</div>
<div class="float:left">
    <input type = "checkbox">10</input>
</div>

JavaScript

$(document).ready(function() {		
	var lastChecked = null;
	var $chkboxes = $('input[type=checkbox]:not(#checkAll)');
    
	$chkboxes.click(function(e) {
		console.log("checkbox clicked");
		if(!lastChecked) {
			console.log("This was the first checkbox clicked");
			lastChecked = this;
			return;
		}
		if(e.shiftKey) {
			console.log("Shift held");
			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;
	});
    
    	$("#checkAll").click(function () {
        if ($("#checkAll").is(':checked')) {
            $("input[type=checkbox]").each(function () {
                $(this).prop("checked", true);
            });

        } else {
            $("input[type=checkbox]").each(function () {
                $(this).prop("checked", false);
            });
        }
    });
    
    
});