Select and unselect all checkboxes in a div with a button click using jQuery.

The click handler for when the buttons are clicked:

$(document).ready(function () {
    $("#select-all").click(function () {
        //select-all button clicked
        doMassCheckBoxSetting(true);
    });
    $("#unselect-all").click(function () {
        doMassCheckBoxSetting(false);
    });
});

Passing true or false into the function determines the checkboxes checked status

doMassCheckBoxSetting(true);//select all
doMassCheckBoxSetting(false);//unselect all

The doMassCheckBoxSetting() function loops through every checkbox in the farm-animal-checkboxes div and sets the check status depending on the value passed in

function doMassCheckBoxSetting(value) {
    $("#farm-animal-checkboxes").find("input[type=checkbox]").each(function () {
        this.checked = value;
    });
}

The HMTL:

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header">
                    <h2 class="text-center">Select / unselect all checkboxes</h2>
                </div>
                <div class="card-body px-4">
                    <div class="row mt-3">
                        <div class="col-12 text-center mb-3">
                            <button type="button" class="btn btn-success" id="select-all">Select all</button>
                            <button type="button" class="btn btn-warning" id="unselect-all">Unselect all</button>
                        </div>
                        <div class="col-12">
                            <form>
                                <div class="row" id="farm-animal-checkboxes">
                                    <div class="col">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="" id="chicken_cb">
                                            <label class="form-check-label" for="chicken_cb">
                                                Chicken
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="" id="sheep_cb">
                                            <label class="form-check-label" for="sheep_cb">
                                                Sheep
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="" id="cow_cb">
                                            <label class="form-check-label" for="cow_cb">
                                                Cow
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="" id="goat_cb">
                                            <label class="form-check-label" for="goat_cb">
                                                Goat
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>