JSFiddle - React, Tailwind, and code Playground

HTML

<table id="Table" width="95%">
    <thead>
        <tr>
            <th width="5%">
                <input type="checkbox" id="selectall"></input>
            </th>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd gradeX">
            <td>
                <input type="checkbox" class="selectedId" value="" />
            </td>
            <td>Trident</td>
            <td>Internet Explorer 4.0</td>
            <td>Win 95+</td>
        </tr>
        <tr class="even gradeC">
            <td>
                <input type="checkbox" class="selectedId" value="" />
            </td>
            <td>Trident</td>
            <td>Internet Explorer 5.0</td>
            <td>Win 95+</td>
        </tr>
        <tr class="odd gradeA">
            <td>
                <input type="checkbox" class="selectedId" value="" />
            </td>
            <td>Trident</td>
            <td>Internet Explorer 5.5</td>
            <td>Win 95+</td>
        </tr>
        <tr class="even gradeA">
            <td>
                <input type="checkbox" class="selectedId" value="" />
            </td>
            <td>Trident</td>
            <td>Internet Explorer 6</td>
            <td>Win 98+</td>
        </tr>
        <tr class="odd gradeA">
            <td>
                <input type="checkbox" class="selectedId" value="" />
            </td>
            <td>Trident</td>
            <td>Internet Explorer 7</td>
            <td>Win XP SP2+</td>
        </tr>
        <tr class="even gradeA">
            <td>
                <input type="checkbox" class="selectedId" value="" />
            </td>
            <td>Trident</td>
            <td>AOL browser (AOL desktop)</td>
            <td>Win XP</td>
        </tr>
        <tr class="gradeA">
            <td>
                <input type="checkbox" class="selectedId" value="" />
            </td>
            <td>Gecko</td>
           ...

JavaScript

//select all checkboxes
$('#selectall').click(function (i, v) {
    $('.selectedId').prop('checked', this.checked);
});

var checkCount = $('.selectedId').length;
$('.selectedId').click(function (i, v) {
    $('#selectall').prop('checked', $('.selectedId:checked').length == checkCount)
});

//shift-click checkboxes 
var lastChecked = null;
var handleChecked = function (e) {
    if (lastChecked && e.shiftKey) {
        var i = $('input[type="checkbox"]').index(lastChecked);
        var j = $('input[type="checkbox"]').index(e.target);
        var checkboxes = [];
        if (j > i) {
            checkboxes = $('input[type="checkbox"]:gt(' + i + '):lt(' + (j - i) + ')');
        } else {
            checkboxes = $('input[type="checkbox"]:gt(' + j + '):lt(' + (i - j) + ')');
        }

        if (!$(e.target).is(':checked')) {
            $(checkboxes).removeAttr('checked');
        } else {
            $(checkboxes).attr('checked', 'checked');
        }
    }
    lastChecked = e.target;


}
$('input[type=checkbox]').click(handleChecked);