JSFiddle - React, Tailwind, and code Playground

HTML

<table >
    <thead>
        <tr>
            <th scope="col"><input type="checkbox" /></th>
            <th scope="col">Column</th>
        </tr>
    </thead>
    <tbody>
        <tr>            
            <th scope="row"><input type="checkbox" /></th>
            <td>Row 0</td>
        </tr>        
    </tbody>
</table>

CSS

table th, table td{padding:.5em}
table thead th{background:#ddd}

JavaScript

//產生 rows
var html = [], j=0;
for (var i=1; i<500; i++) {
    html[j++] = '<tr>';
    html[j++] = '<th scope="row"><input type="checkbox" /></th>';
    html[j++] = '<td>Row ' + i + '</td>';
    html[j++] = '</tr>';
}
$('table tbody').append(html.join(''));

//使用 delegate 綁定 click 事件至 thead 內的 checkbox
$('table').delegate('thead :checkbox', 'click', function (e) {
    $(e.liveFired)
        .find('tbody :checkbox')
        .prop('checked', $(this).prop('checked'))
        .change();
})
//使用 delegate 綁定 change 事件至 tbody 內的所有 checkbox
.delegate('tbody :checkbox', 'change', function (e) {
    var box = $(this);
    box
        .parents('tr')
        .css('background', box.prop('checked') ? '#eee' : 'transparent');
});