How to Add a Select All Option to a Checkbox Form Field

Overview

Would you like to add a Select All option to your Checkbox form field? In some forms, you may have several options for your visitors to choose and you just want to provide an easy option to allow the user to select every option quickly. In this tutorial, we’ll show you how easy it is to implement this using JavaScript.

Setup

By default when using the Checkbox form field, you can select as many options as you’d like. But you have to select them manually. Giving the option to bulk select all of the options in your Checkbox can save time to complete your form.

1) Setting up the form

First, you’ll need to set up your form and add the Checkbox form field to your form with all your options. Please know that where ever you place the option to bulk select everything has no bearing on the setup itself.

First add a checkbox form field with options including a  select all option to your checkboxes

2) Adding the CSS Class

Next, inside the form builder click on Field Options » Advanced Options and in the CSS Class, add the checkBoxClass to your Checkbox.

Add the CSS class to your checkbox form field

3) Adding the JavaScript

Finally, the last step is to add the code to your site.

/**
 * Add a Select All option to checkbox
 *
 * @link https://wpforms.com/developers/how-to-add-a-select-all-option-to-a-checkbox-form-field/
 */
function wpf_dev_select_all() {
?>
	<script type="text/javascript">
		jQuery("#wpforms-793-field_1_1").click(function(){
			jQuery(".checkBoxClass li input").prop('checked', jQuery(this).prop('checked'));
		});
	</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_select_all' );

In the above code snippet, you’ll notice the #wpforms-793-field_1_1. This part of the code will need to be updated to match not only for your form ID but also your field ID of the Checkbox field as well as the option number that the Select All option is with regards to what number it was when you added in the options.

Let’s break down that line of code to show you what each number represents.

  • #wpforms-793. The 793 represents our form ID.
  • -field_1. The 1 represents our field ID.
  • _1. The final number is the where the Select All option appears in our list. If you added it as the first option – it will always be 1. If you added 20 options to your Checkbox and made the Select All option the last option, this number would be 20.

If you need help locating your form or field ID, please review this tutorial.

Now you’re visitors have an easy bulk all option on your form.

Now you have a bulk all option on your checkbox field

Would you like to use images for your Checkbox options? Take a look at our tutorial on How to Apply Images to Checkbox Labels Using CSS.