Comment ajouter une option "Tout sélectionner" à un champ de formulaire de cases à cocher

Introduction

Souhaitez-vous ajouter une option Tout sélectionner à votre champ de formulaire Case à cocher ? Pour certains formulaires, vous pouvez proposer plusieurs options à vos visiteurs et vous souhaitez simplement offrir une option facile pour permettre à l'utilisateur de tout sélectionner rapidement.

Par défaut, lorsque vous utilisez le champ de formulaire Case à cocher, vous pouvez sélectionner autant d'options que vous le souhaitez. Mais vous devez les sélectionner manuellement. Donner la possibilité de sélectionner en bloc toutes les options de votre Case à cocher peut faire gagner du temps pour remplir votre formulaire.

Dans ce tutoriel, nous vous montrerons à quel point il est facile de mettre cela en œuvre à l'aide d'un petit extrait de code.

Création du formulaire

Tout d'abord, vous devrez créer un nouveau formulaire, puis ajouter le champ de formulaire Case à cocher à votre formulaire avec toutes vos options. Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter cette documentation.

Pour ce tutoriel, nous plaçons la première option de case à cocher TOUTES LES CHOSES en haut du formulaire.

Ajout de l'extrait pour l'option tout sélectionner

Il est maintenant temps d'ajouter l'extrait à votre site qui permettra de tout sélectionner dans les options de case à cocher lorsqu'une option particulière est cliquée.

Si vous avez besoin d'aide pour ajouter des extraits à votre site, veuillez consulter ce tutoriel.

/**
 * 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">
		
		// Look for the form ID (-3535-), field ID (_8), and the first option inside the checkbox (_1)
		// Find these ids by viewing this tutorial https://wpforms.com/developers/how-to-locate-form-id-and-field-id/
        jQuery( "#wpforms-3535-field_8_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 );

Dans l'extrait de code ci-dessus, vous remarquerez le #wpforms-3535-field_8_1. Cette ligne représente non seulement les identifiants du formulaire et du champ, mais aussi l'option qui représente notre tout sélectionner.

Décomposons cette ligne de code pour vous montrer ce que chaque nombre représente.

• #wpforms-3535. Le 3535 représente notre ID de formulaire.
• -field_8. Le 8 représente notre ID de champ.
• _1. Le dernier nombre indique où l'option Tout sélectionner apparaît dans notre liste. Si vous l'avez ajoutée comme première option, ce sera toujours 1. Si vous avez ajouté 20 options à votre Case à cocher et fait de l'option Tout sélectionner la dernière option, ce nombre serait 20.

Si vous avez besoin d'aide pour localiser votre ID de formulaire ou de champ, veuillez consulter ce tutoriel.

Vos visiteurs ont maintenant un moyen facile de sélectionner toutes les options de votre formulaire.

Souhaitez-vous utiliser des images pour vos options de case à cocher ? Jetez un œil à notre tutoriel sur Comment appliquer des images aux étiquettes de case à cocher à l'aide de CSS.

Articles associés

Référence d’action : wpforms_wp_footer_end

FAQ

Q : Puis-je utiliser ce script lorsque j'utilise des choix d'images pour mon champ de case à cocher ?

R : Absolument ! Cela fonctionnera pour les champs de formulaire Case à cocher avec ou sans images.

Q : Comment puis-je exclure l'option tout sélectionner des notifications du formulaire ?

R : Afin d'exclure votre option tout sélectionner, vous devrez ajouter un extrait de code supplémentaire.

/**
 * Exclude select all option from the email notifications
 *
 * @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 = 3535
    if( $form_data[ 'id' ] != 3535 ) {
        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 = 8;
	
	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 ); 

Comme pour les autres extraits, vous devrez vous souvenir de changer le texte TOUT LES CHOSES pour qu’il corresponde au texte que vous avez défini pour l’option tout sélectionner. Et le $checkboxes_field_id est l’ID du champ utilisé pour la case à cocher. Si vous avez besoin d’aide pour trouver votre ID de champ, veuillez consulter ce tutoriel.