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>