JSFiddle - React, Tailwind, and code Playground

HTML

<button id="btnDept">select Depts</button>
<div id="dialog" title="Select the Depts you want to include in the report" style="display:none;">
    <div>
        <section class="breakAfter">
            <label for="ckbxSelectAll">Select All</label>
            <input type="checkbox" id="ckbxSelectAll" />
            <label for="ckbxDeselectAll">Deselect All</label>
            <input type="checkbox" id="ckbxDeselectAll" />
        </section>
        <label for="ckbx2">2</label>
        <input type="checkbox" class="value option" data-value="2" id="ckbx2" />
        <label for="ckbx3" id="lbl3">3</label>
        <input type="checkbox" class="value option" data-value="3" id="ckbx3" />
    </div> <span id="result"></span>

</div>

CSS

.breakAfter {
    display:block;
}

JavaScript

$("#btnDept").click(function () {
    $("#dialog").dialog({
        modal: true
    });

    function reportChange() {
        var result = $(".value.option:checked").map(function (i, e) {
            return $(e).attr("data-value");
        }).get();
        console.log("Change", result);
        $("#result").text(JSON.stringify(result));
    }

    $("#ckbxSelectAll").click(function () {
        var isChecked = $("#ckbxSelectAll").prop("checked");
        if (isChecked) {
            $(".value.option").prop("checked", isChecked);
            $("#ckbxDeselectAll").prop("checked", false);
        }
        reportChange();
    });
    $("#ckbxDeselectAll").click(function () {
        $(".value.option, #ckbxSelectAll").removeAttr("checked");
        reportChange();
    });
    $(".value.option").click(function () {
        var checkedResults = $(".value.option").map(function (i, e) {
            return $(e).prop("checked");
        }).get();
        var areAllChecked = checkedResults.reduce(function (seed, value) {
            return seed && value;
        }, true);
        var areSomeChecked = checkedResults.reduce(function (seed, value) {
            return seed || value;
        }, false);
        $("#ckbxDeselectAll").prop("checked", !areSomeChecked);
        $("#ckbxSelectAll").prop("checked", areAllChecked);
        reportChange();
    });
});