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

Introduction

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.

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.

In this tutorial, we’ll show you how easy it is to implement this using a small code snippet.

Creating the form

First, you’ll need to create a new for,m and then add the Checkbox form field to your form with all of your options. If you need help in creating your form, please see this documentation.

For this tutorial, we’re putting the first checkbox option of ALL THE THINGS at the top of the form.

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

Adding the snippet for the select all option

Now it’s time to add the snippet to your site that will all the select all of the checkbox options when a particular option is clicked.

If you need help in adding snippets to your site, please see this tutorial.

/**
 * Add a Select All option to the 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").change(function(){
			var $this = jQuery(this),
			    $list = $this.closest( 'ul' );
			if ( $this.is( ':checked' ) ) {
				$list.find( 'li' ).addClass( 'wpforms-selected' );
				$list.find( 'input' ).prop( 'checked', true );
			} else {
				$list.find( 'li' ).removeClass( 'wpforms-selected' );
				$list.find( 'input' ).prop( 'checked', false );
			}
		});
	</script>
	<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_select_all', 10 );

In the above code snippet, you’ll notice the #wpforms-793-field_1_1. This line represents not only the form and field IDs but also the option that represents our select all.

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 your visitors have an easy way to select all of the options in 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.

Action Reference: wpforms_wp_footer_end

FAQ

Q: Can I use this script when using Image Choices for my Checkbox field?

A: Absolutely! This will work for both image and non-image Checkbox form fields.

Q: How can I add a “deselect all” option?

A: If you only want to add an option that does a bulk deselect of any option already selected, simply add an option to your form that would specify this such as Deselect or None.

Add an option to your checkbox that will deselect all options currently selected.  We've called ours "None"

Once you’ve saved your form, you can then add this code to your site.

/**
 * Add a deselect all option to the 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-1115-field_18_4").change(function(){
            var $this = jQuery(this),
                $list = $this.closest( 'ul' );
            if ( $this.is( ':checked' ) ) {
                $list.find( 'li' ).removeClass( 'wpforms-selected' );
                $list.find( 'input' ).prop( 'checked', false );
            }
        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_select_all', 10 );

Just remember to change the #wpforms-1115-field_18_4 to match what your form ID, field ID and option number is from your form. Our form ID is #wpforms-1115, the field ID is -field_18 and finally the option number for the deselection is _4.

Q: How can I exclude the select all option from the form notifications?

A: In order to exclude your select all option, you’ll need to add an additional code snippet.

/**
 * Add a deselect all option to the checkbox
 *
 * @link https://wpforms.com/developers/how-to-add-a-select-all-option-to-a-checkbox-form-field/
 */

function wpf_dev_process_filter( $fields, $entry, $form_data ) {
	
    // Only run on my form with ID = 793
    if( $form_data[ 'id' ] != 793 ) {
        return $fields;
    }
	
	// Enter the text for the select all option
	$select_all_option = 'ALL THE THINGS';
	
	// Enter the field ID for the checkbox with the select all option
	$checkboxes_field_id = 1;
	
	if( strpos(  $fields[$checkboxes_field_id]['value'], $select_all_option ) !== false ){
		$fields[$checkboxes_field_id]['value'] = str_replace( $select_all_option, '', $fields[$checkboxes_field_id]['value'] ); 
		
		$fields[$checkboxes_field_id]['value_raw'] = str_replace( $select_all_option, '', $fields[$checkboxes_field_id]['value_raw'] ); 
	}
	
	return $fields;
}

add_filter( 'wpforms_process_filter', 'wpf_dev_process_filter', 10, 3 ); 

As with the other snippets, you’ll need to remember to change the ALL THE THINGS text to match the text that you have set for the select all option. And the $checkboxes_field_id is the field ID that is used for the checkbox. If you need help in finding your field ID, please see this tutorial.