JSFiddle - React, Tailwind, and code Playground

by tihg7947

HTML

<table id="Table" width="95%">
<thead>
<tr>
<th width="15%" ><input type="checkbox" id="selectall">Select All</input></th>
<th></th>

</tr>
</thead>
    <tbody>
        <tr>
            <td><input type="checkbox"  class="selectedId" value="" /></td>
        </tr><tr>
            <td><input type="checkbox"  class="selectedId" value="" /></td>
        </tr><tr>
            <td> <input type="checkbox" class="selectedId" value="" /></td>
        </tr><tr>
            <td> <input type="checkbox" class="selectedId" value="" /></td>
        </tr><tr>
            <td> <input type="checkbox" class="selectedId" value="" /></td>
        </tr><tr>
            <td> <input type="checkbox" class="selectedId" value="" /></td>
        </tr><tr>
            <td> <input type="checkbox"  class="selectedId" value="" /> </td> 
        </tr>
    </tbody>
</table>

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;
 
    // Other click action code.
 
}
$('input[type=checkbox]').click(handleChecked);