JSFiddle - React, Tailwind, and code Playground

by ostapische

HTML

<table><tbody>
    <tr>
        <td>Select all:</td>
        <td><button onclick="chk(this, true);">Select all</button></td>
    </tr>
    <tr>
        <td>Deselect all:</td>
        <td><button onclick="chk(this, false);">Deselect all</button></td>
    </tr>
    <tr>
        <td>First checkbox:</td>
        <td><input type="checkbox" onchange="chk(this, null);" /></td>
    </tr>
    <tr>
        <td>Second checkbox:</td>
        <td><input type="checkbox" onchange="chk(this, null);" /></td>
    </tr>
    <tr>
        <td>Enabled/disabled button:</td>
        <td><button id="enDisButton" disabled="disabled">If you can click on me then I'm enabled</button></td>
    </tr>
</tbody></table>

JavaScript

function chk(elem, selectAll){
    // input/button -> td -> tr -> tbody
    var tbody = $($(elem).parent().parent().parent());
    console.log("cb");
    if (selectAll === true) {
        tbody.find('input:checkbox:not(:checked)').click();
        //tbody.find('input:checkbox:not(:checked)').attr("checked", true);
    } else if (selectAll === false) {
        tbody.find('input:checkbox:checked').click();
        //tbody.find('input:checkbox:checked').attr("checked", false);
    } else {
        //clicking on checkbox
    }
    // all unchecked
    if (tbody.find('input:checkbox:checked').length == 0) {
        $("#enDisButton").attr("disabled", "disabled");
    // all checked
    } else if (tbody.find('input:checkbox:not(:checked)').length == 0) {
        $("#enDisButton").removeAttr("disabled");
    }
}