Add 'Select All' to check all checkboxes

[PotatoMato]

Hi everyone. If you want to add a 'Select All' to check all the checkboxes. You may try the code below on your DataPage:

HTML Block:

 Select All<input onclick="toggle(this);" type="checkbox" />

Footer:

<script language="JavaScript">
function toggle(source) {
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i] != source)
checkboxes[i].checked = source.checked;
}
}
</script>

Output:

 

-Potato

[Kronos]

Thank you, this was really helpful to my workflow but I added some changes since I want to have two select all option on my form.

It seems that the numbering will continue even on the second checkboxes on the for loop in the code.

I'll share it here just in case someone will have a similar workflow.

Here is the code I used:

<script language="JavaScript">
function toggle(source) {
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (var i = 0; i < 4; i++) {
if (checkboxes[i] != source)
checkboxes[i].checked = source.checked;
}
}

function toggle2(source) {
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (var i = 4; i < 8; i++) {
if (checkboxes[i] != source)
checkboxes[i].checked = source.checked;
}
}
</script>

 

Also I added a new HTML block for the second select all checkbox:

Select All<input onclick="toggle2(this);" type="checkbox" />

 

This is the Output:

 

[APTUS]

@PotatoMato and @Kronos, I have implemented both of your scripts above and they are working perfectly.

First, I want to thank you both for providing these snippet solutions. They are very useful and I really appreciate it.

Second, I have made a modification to Kronos' suggestion and I am sharing  it here (1) to get any feedback or comments on it and/or if it doesn't or does make sense; and (2) assuming it does make sense and is a workable solution, it may help you or others reviewing this post down the line. Here it goes:

In Kronos' suggested code, where we want to use two toggles on the same page effecting two separate sets of checkboxes, what I did is instead of using ('input[type="checkbox"]') in the "querySelectorAll" line, I use IDs which allows using unique IDs to target each separate set of checkboxes on the page in toggle1 and toggle2. The added benefit of this approach is the the "for loop" in each toggle's function can remain in the original form as presented by PotatoMato without having to worry about counting each set of checkboxes and using those specific counts in the for loops. IMHO, this provides more flexibility and less maintenance if changes need to be made in the future. 

If you happen to see my comment here, please let me know your thoughts.

Thank you