Toggle checkboxes with jQuery and Prototype JS

Toggle checkboxes with jQuery and Prototype JS

Sometimes you work with forms having a long list of checkboxes, in such scenarios a “Check All” or “Toggle Selection” button comes handy. Such button can save your time by toggling your selection with one click.

HTML:

<div id="fruits">
<input type="button" value="Check/Uncheck All" onclick="toggleCheckboxes();" />

<input type="checkbox" name="color[]" value="Red" id="red"> <label for="red">Red</label> <br />
<input type="checkbox" name="color[]" value="Green" id="green"> <label for="green">Green</label> <br />
<input type="checkbox" name="color[]" value="Blue" id="blue"> <label for="blue">Blue</label> <br />
<input type="checkbox" name="color[]" value="Yellow" id="yellow"> <label for="yellow">Yellow</label> <br />
<input type="checkbox" name="color[]" value="Black" id="black"> <label for="black">Black</label> <br />
</div>

Toggle checkboxes with Prototype Js

function toggleCheckboxes(){
$$('#fruits input[type=checkbox]').each(function (el) {
el.checked = !el.checked;
});
}

jQuery function:

function toggleCheckboxes(){
$('#fruits input[type=checkbox]').each(function (el) {
$(this).prop('checked',!this.checked);
});
}

`toggleCheckboxes()` function will find all checkboxes inside “fruits” div and check them if not previously checked, and if they are already checked it will uncheck them due to the fact that `!el.checked` is doing negation of their current state.