JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="id_chk1" class="chkbox" value="1" />Check 1
<br/>
<input type="checkbox" id="id_chk2" class="chkbox" value="2" />Check 2
<br/>
<input type="checkbox" id="id_chk3" class="chkbox" value="3" />Check 3
<br/>
<input type="checkbox" id="id_chk4" class="chkbox" value="4" />Check 4
<br/>
<input type="checkbox" id="id_chk5" class="chkbox" value="5" />Check 5
<br/>
<input type="checkbox" id="id_chk6" class="chkbox" value="6" />Check 6
<br/>
<input type="checkbox" id="id_chk7" class="chkbox" value="7" />Check 7
<br/>

JavaScript

var lastChecked = null;
var $chkboxes = $('.chkbox');
$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).attr('checked', lastChecked.checked);

    }

    lastChecked = this;
});