image

Add Select All To Gravity Forms Checkboxes

We recently needed to setup a hefty form with a lot of checkboxes for a client. In our case, the client needed the user to select every single checkbox within each group of checkboxes. The user could do this one-by-one, but with over 100 checkboxes spread across 12 sections, it would definitely take a while.

To simplify, we needed to add a Check All option to the top of the list of each of the checkbox groups. That way the user could simply click and select everything in that group. However, Gravity Forms does not have this function built in, so we needed a solution.

Adding Check All Option To Gravity Forms Checkbox Group

The solution is a clean bit of jQuery we found on a forum thanks to AshWebStudio. It works by adding a custom CSS class to the checkbox group while editing the form and having the first option be your Check All option.

Step One

Drop this bit of jQuery before the closing body tag in the footer.php file in your WordPress theme. Bonus points for only calling it on the pages that need it.


$(document).ready(function(){
  // Check all in Gravity Forms
  $('.checkall li:first-child input').click(function() {
    $(this).parent('li').parent('ul').find(':checkbox').attr('checked', this.checked);
  });
});

Step Two

In WordPress when editing the form, add a custom CSS class of checkall under the Appearance tab of each checkbox group that needs it. Then be sure to have the first checkbox in the group say something like Check All or Select All.

image

Once finished, update your form and test it out. If it is not working for you, first double check these 2 simple steps - then if you are still having trouble, try disabling all other plugins as there could be a scripting conflict you need to address.

Step Three

Add a CSS class to your stylesheet to the new Check All box to help it stand out. You would want to target .checkall li:first-child. Obviously this isn’t a requirement, but in our case we wanted to highlight the key option for each group.

Bonus: Add Select Count Minimum and Maximum Limits

Using Gravity Wiz Limit Checkboxes add-on, you can set a minimum and / or maximum select count requirement to the checkbox group. In our example, we had to make sure every single checkbox is selected - and the built in “required” option does not do the trick since that only looks for a minimum of 1 selected checkbox.

Stay In The Loop

Social Gathering

Join our newsletter to get notified about the happenings here at J Taylor Design.