JSFiddle - React, Tailwind, and code Playground

HTML

<p>drag click, shift click</p>
<form>
<table>
<tbody>
<tr>
<td>all</td>
<td><input type="checkbox" value="one[]" class="XenoCheckAll" /></td>
<td><input type="checkbox" value="two[]" class="XenoCheckAll" /></td>
</tr>
<tr>
<td>row1</td>
<td><input type="checkbox" name="one[]" value="1" /></td>
<td><input type="checkbox" name="two[]" value="1" /></td>
</tr>
<tr>
<td>row2</td>
<td><input type="checkbox" name="one[]" value="1" /></td>
<td><input type="checkbox" name="two[]" value="1" /></td>
</tr>
<tr>
<td>row3</td>
<td><input type="checkbox" name="one[]" value="1" /></td>
<td><input type="checkbox" name="two[]" value="1" /></td>
</tr>
<tr>
<td>row4</td>
<td><input type="checkbox" name="one[]" value="1" /></td>
<td><input type="checkbox" name="two[]" value="1" /></td>
</tr>
<tr>
<td>row5</td>
<td><input type="checkbox" name="one[]" value="1" /></td>
<td><input type="checkbox" name="two[]" value="1" /></td>
</tr>
<tr>
<td>row6</td>
<td><input type="checkbox" name="one[]" value="1" /></td>
<td><input type="checkbox" name="two[]" value="1" /></td>
</tr>
<tr>
<td>row7</td>
<td><input type="checkbox" name="one[]" value="1" /></td>
<td><input type="checkbox" name="two[]" value="1" /></td>
</tr>
<tr>
<td>row8</td>
<td><input type="checkbox" name="one[]" value="1" /></td>
<td><input type="checkbox" name="two[]" value="1" /></td>
</tr>
<tr>
<td>row9</td>
<td><input type="checkbox" name="one[]" value="1" /></td>
<td><input type="checkbox" name="two[]" value="1" /></td>
</tr>
<tr>
<td>row10</td>
<td><input type="checkbox" name="one[]" value="1" /></td>
<td><input type="checkbox" name="two[]" value="1" /></td>
</tr>
</tbody>
</table>
</form>

CSS

td { padding:5px; }

JavaScript

$(function() {
    var dragobj = null, lastclick = null;
    $(document.body).on('mouseup', function() { dragobj = null; });
    $('form').on('selectstart dragstart', 'input[type=checkbox][name]', function() {
        return false;
    }).on('mousedown', 'input[type=checkbox][name]', function() {
        dragobj = this;
    }).on('mouseout', 'input[type=checkbox][name]', function() {
        if(this == dragobj) dragobj.checked = !dragobj.checked;
    }).on('mouseover', 'input[type=checkbox][name]', function() {
        if(!dragobj || dragobj.name != this.name) return;
        if(this == dragobj) { this.checked = !this.checked; return; }
        this.checked = dragobj.checked;
        lastclick = this;
    }).on('click', 'input[type=checkbox][name]', function(event) {
        var clickobj = lastclick || this;
        lastclick = this;
        if(!event.shiftKey || this == clickobj || this.name != clickobj.name) return;
        var objs = this.form[this.name];
        var idx = [$(objs).index(clickobj), $(objs).index(this)].sort();
        $(objs).filter(function(i) { return idx[0] <= i && idx[1] >= i; }).prop('checked', clickobj.checked);
    }).find('input[type=checkbox].XenoCheckAll').on('click', function() {
        $(this.form[this.value]).prop('checked', this.checked);
    });
});