5 min read

Toggle checkboxes with jQuery and Prototype JS

Toggle checkboxes with jQuery and Prototype JS

Last modified

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.


<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 />

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) {

`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.