JSFiddle - React, Tailwind, and code Playground

by Eugeny Venegrad

HTML

<form>
    <table>
        <tr>
            <td><input type="checkbox" id="select_all"/> CheckAll</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="ebc" name="select[]"/></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="ebc" name="select[]"/></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="ebc" name="select[]"/></td>
        </tr>
    </table>
</form>

JavaScript

$('#select_all').change(function() {
    var c = this.checked;
    $('.ebc').prop('checked',c);
});


$(".ebc").change(function() {
    $('#select_all').removeAttr('checked');   
    
    if(!$(".ebc").hasAttribute('checked')) {
        $('#select_all').prop('checked','checked');
    }
});