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.