Here ‘s a solution with only js. You can also do it with JQuery.
Add a class in your checkbox (or use an existing one). It allows you to get all your checkboxes (in my example ckBox
). Also, add a button with a onClick event handler
<input type="checkbox" class="ckBox" id="vehicle1" name="vehicle1" value="Bike">
<input type="checkbox" class="ckBox" id="vehicle2" name="vehicle2" value="Car">
<input type="checkbox" class="ckBox" id="vehicle3" name="vehicle3" value="Boat">
<button id="selectOrUnselect" onClick="toggleSelect()">select</button>
<script>
// var used to toggle
let allSelected = true
// get the button, use to change the inside text
const btnSelect = document.getElementById("selectOrUnselect")
// get all the checkboxes
const ckBoxes = document.getElementsByClassName("ckBox")
function toggleSelect(){
// change check to uncheck or uncheck to check
for(let i = 0 ; i < ckBoxes.length; ++i){
ckBoxes[i].checked = allSelected;
}
// change button text
if(allSelected){
btnSelect.innerText = "Unselect"
}else{
btnSelect.innerText = "select"
}
allSelected = !allSelected
}
</script>