JSFiddle - React, Tailwind, and code Playground

by abhishek kirar

HTML

<table border="1" class="table1">
    <thead>
        <tr>
            <th><input type="checkbox" class="allcb" data-child="chk"/></th>
            <th>select all</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" class="chk"/></td>
            <td>value1</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="chk"/></td>
            <td>value2</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="chk"/></td>
            <td>value3</td>
        </tr>
    </tbody>
</table>
<br/>
<table border="1" class="table2">
    <thead>
        <tr>
            <th><input type="checkbox" class="allcb" data-child="chk2"/></th>
            <th>select all</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" class="chk2"/></td>
            <td>value1</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="chk2"/></td>
            <td>value2</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="chk2"/></td>
            <td>value3</td>
        </tr>
    </tbody>
</table>
<br/>
<table border="1" class="table3">
    <thead>
        <tr>
            <th><input type="checkbox" class="allcb" data-child="chk3"/></th>
            <th>select all</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" class="chk3"/></td>
            <td>value1</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="chk3"/></td>
            <td>value2</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="chk3"/></td>
            <td>value3</td>
        </tr>
    </tbody>
</table>

CSS

.table1{
    background:#DADADA;
}

.table2{
    background:#999999;
}

.table3{
    background:#DADADA;
}

JavaScript

$('.allcb').on('click', function(){
    var childClass = $(this).attr('data-child');
    $('.'+childClass+'').prop('checked', this.checked);
});