How can I have a 'select all' option in a checkbox group?

Written Apr 2, 2015 10:08

A user wanted to be able to add a 'Select All' option to a checkbox group in ChronoForms v5. The idea was that when this checkbox is clicked all the others in the group are checked. Here is a short jQuery solution for this.

To have this work you need to add a checkbox group to your form in the Designer tab and set a distinct value in the Class box that will identify all the checkboxes in the group. I used check_all.

You also need to know the id of the 'Select all' checkbox in the group. When you give the Checkbox group an ID e.g. checkbox_group, ChronoForms adds a number to the id of each checkbox in the group i.e. checkbox_group1, checkbox_group2, . . . You can see the ID of your CheckBox by looking at the Form HTML.

Then you can add this JavaScript to a Load JavaScript action in the form On Load event in the Setup Tab:

jQuery(document).ready(function(jQ) {
  var check_all, check_class;
  // identify the 'Select all checkbox'
  check_all = jQ('#checkbox_group1');
  // identify the other checkboxes in the group
  check_class = jQ('.check_all');
  check_all.on('click',function(){
    check_class.each(function(){
      this.checked = check_all.is(':checked');
    });
  });
});

Change the two highlighted strings to match the ID and Class you are using.

This code will set the 'Select all' checkbox so that when it changes all the other checkboxes change to match.

FAQs