JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<p>Click the checkbox in the <code>thead</code> of the table</p>

<table border="1" cellpadding="7">
    <thead>
        <tr>
            <th><input type="checkbox" data-mega-check></th>
            <th>Title</th>
            <th>Title</th>
            <th>Title</th>
            <th>Title</th>
            <th>Title</th>
            <th>Title</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" class="action-box"></td>
            <td>Entry</td>
            <td>Entry</td>
            <td>Entry</td>
            <td>Entry</td>
            <td>Entry</td>
            <td>Entry</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="action-box"></td>
            <td>Entry</td>
            <td>Entry</td>
            <td>Entry</td>
            <td>Entry</td>
            <td>Entry</td>
            <td>Entry</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="action-box"></td>
            <td>Entry</td>
            <td>Entry</td>
            <td>Entry</td>
            <td>Entry</td>
            <td>Entry</td>
            <td>Entry</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="action-box"></td>
            <td>Entry</td>
            <td>Entry</td>
            <td>Entry</td>
            <td>Entry</td>
            <td>Entry</td>
            <td>Entry</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="action-box"></td>
            <td>Entry</td>
            <td>Entry</td>
            <td>Entry</td>
            <td>Entry</td>
            <td>Entry</td>
            <td>Entry</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="action-box"></td>
            <td>Entry</td>
            <td>Entry</td>
            <td>Entry</td>
            <td>Entry</td>
            <td>Entry</td>
            <td>Entry</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="action-box"></td>
           ...

CSS

table{
    border-collapse:collapse;
}

JavaScript

$(document).on('change', '[data-mega-check]', function() {
    var $this = $(this),
        checked = $this.is(':checked'),
        $table = $this.closest('table'),
        checkboxes = $table.find('input[type="checkbox"]');

    if (checked) {
        checkboxes.attr('checked', 'checked');
    } else {
        checkboxes.removeAttr('checked');
    }
});