Author: | kloverde |
---|---|
Official Page: | Go to website |
Last Update: | September 12, 2020 |
License: | MIT |

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.