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>
A drained and empty Kennington reservoir images from a drone in early July 2024. The…
Merrimu Reservoir from drone. Click images to view larger.
Using FTP and PHP to get an array of file details such as size and…
Creating and using Laravel form requests to create cleaner code, separation and reusability for your…
Improving the default Laravel login and register views in such a simple manner but making…
Laravel validation for checking if a field value exists in the database. The validation rule…