JSFiddle - React, Tailwind, and code Playground

HTML

<a id="selectAll">Select All</a>

<div>
    <div class="Col-Liste">
        <input id="chk1" type="checkbox" checked="checked" />
        <label for="chk1">Checkbox1</label>
    </div>
    <div class="Col-Liste">
        <input id="chk2" type="checkbox" />
        <label for="chk2">Checkbox2</label>
    </div>
    <div class="Col-Liste">
        <input id="chk3" type="checkbox" />
        <label for="chk3">Checkbox3</label>
    </div>
</div>

CSS

#selectAll {
    cursor:pointer;
}

JavaScript

$(function () {



    $("#selectAll").on('click', function () {

        var inputs = $(this).parent().find(":checkbox");
        var iL = inputs.length;
        var checkedInputs = $(this).parent().find(":checkbox:checked");
        check = ($(this).text() == "Select All")
        done = (check && checkedInputs.length < iL) || (!check || checkedInputs.length == 0);
        if (done) {
            inputs.prop('checked', check);
            $(this).text(check ? "Uncheck All" : "Select All")
        }
    })

    $("input").on('change', function () {

        var Inputs = $(this).parent().parent().find(":checkbox");
        var iL = Inputs.length;
        var checkedInputs = Inputs.filter(function () {
            return $(this).prop('checked');
        }).length;

        switch (checkedInputs) {
            case 0:
                $('#selectAll').text("Select All");
                break;
            case iL:
                $('#selectAll').text("Uncheck All");
                break;

        }
    })
});