Development

How to select and unselect all check boxes with a button

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>

 

 

Share

Recent Posts

Kennington reservoir drained drone images

A drained and empty Kennington reservoir images from a drone in early July 2024. The…

1 year ago

Merrimu Reservoir drone images

Merrimu Reservoir from drone. Click images to view larger.

1 year ago

FTP getting array of file details such as size using PHP

Using FTP and PHP to get an array of file details such as size and…

2 years ago

Creating Laravel form requests

Creating and using Laravel form requests to create cleaner code, separation and reusability for your…

2 years ago

Improving the default Laravel login and register views

Improving the default Laravel login and register views in such a simple manner but making…

2 years ago

Laravel validation for checking if value exists in the database

Laravel validation for checking if a field value exists in the database. The validation rule…

2 years ago