JSFiddle - React, Tailwind, and code Playground

by arch

HTML

<div id="test">
    <table>
        <tr>
            <td>
                <input type="checkbox" checked="checked" />
           </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" checked="checked" />
           </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" checked="checked" />
           </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" checked="checked" />
           </td>
        </tr>
        <tr>
            <td id="enabled">
                E
            </td>
        </tr>
    </table>
</div>

CSS

td {
    width: 40px;
    text-align: center;
}

td.enabled {
    background-color: #FF00FF;
}

JavaScript

enabled = false;
state = false;
startIndex = null;

$('#test :checkbox')
.mousedown(function(event) {
    enabled = true;
    state = $(this).is(':checked');
    startIndex = $(this).parents('tr').index();
    $('#enabled').addClass('enabled');
    
    $(this).one('mouseout', function() {
        onSelect($(this), $([]), state);
    });
})
.mouseover(function(event) {
    if(enabled) {
        var sourceRow = $(this).parents('tr');
        var targetRow = $(this).parents('tr').parent().children('tr').eq(startIndex);
        
        sourceRow.css('backgroundColor', 'red');
        targetRow.css('backgroundColor', 'green');
        
        var endIndex = sourceRow.index();
        if(endIndex > startIndex) {
            var prevelements = sourceRow.prevUntil(targetRow, 'tr');
            onSelect(targetRow, sourceRow, prevelements, state);
        }
        else if(endIndex < startIndex) {
            var nextelements = sourceRow.nextUntil(targetRow, 'tr');
            onSelect(targetRow, sourceRow, nextelements, state);            
        }
    }
});

function onSelect(target, source, jqarr, targetState) {
    target.css('backgroundColor', !state ? 'black' : 'white');
    source.css('backgroundColor', !state ? 'black' : 'white');
    jqarr.css('backgroundColor', !state ? 'black' : 'white');
    target.find(':checkbox').attr('checked', !state);
    source.find(':checkbox').attr('checked', !state);
    jqarr.find(':checkbox').attr('checked', !state);
}

$('html').mouseup(function(event) {
    enabled = false;
    $('#enabled').removeClass('enabled');
});