SelectAllCheckbox Plugin: Check & Uncheck All Checkboxes On Single Click

What is it?

Are you tired of writing JavaScript/jQuery codes to check and uncheck all check-boxes? Here is good news for you. Now, you can do it by including a light weighted plugin written in vanilla JavaScript.

How to use it?

You can use this plugin in your page just by including SelectAllCheckbox as below:

<script type="text/javascript" src="PATHTOSCRIPT/selectallcheckbox.js"></script>

And then, create checkbox elements as below:

<div id="checkboxes">
<h3>Group 1</h3>
    <label class="selectAllLabel">
	<input type="checkbox" id="selectAllGroup1"/>
	Select All
    </label>
    <label>
	<input type="checkbox" id="group1_a" name="group1" value="1a"/>
	Choice A
    </label>
    <label>
        <input type="checkbox" id="group1_b" name="group1" value="1b"/>
        Choice B
    </label>
     <label>
        <input type="checkbox" id="group1_c" name="group1" value="1c"/>
        Choice C
    </label>
    <button id="getState1">Get state</button>
</div>

And now the time to initialize the plugin and pass the parameters in CheckboxGroup()

const group1 = new CheckboxGroup(
               "selectAllGroup1",
               "group1",
               onChange
            );

function onChange( checkboxes, checkedState ) {
            var html = "<p>Changed:<br/>";
            for( var i = 0; i < checkboxes.length; i++ ) {
               var box = checkboxes[i];
               var line = box.id + " : " + ( box.checked ? "checked" : "unchecked" ) + "<br/>";
               html += line;
            }
            html += ("</p><p>Checked state of group is: " + checkedState + "</p>");
            document.getElementById( "log" ).innerHTML = html;
         }

In above code, there are three parameters:

• selectAllGroup1: This is ‘Select All’ checkbox id. Users will click on this checkbox to check and uncheck checkboxes.
• group1: This the name attribute of check-boxes.
• onChange: This is the onChange callback event. A user can pass his own function name that will perform a specific activity when the user checks all checkboxes.