Hinzufügen einer Option "Alles auswählen" zu einem Formularfeld mit Kontrollkästchen

Einführung

Möchten Sie Ihrem Checkbox-Formularfeld eine Alles auswählen-Option hinzufügen? In einigen Formularen haben Sie vielleicht mehrere Optionen für Ihre Besucher zur Auswahl, und Sie möchten einfach eine einfache Option anbieten, damit der Benutzer jede Option schnell auswählen kann.

Wenn Sie das Formularfeld Checkbox verwenden, können Sie standardmäßig so viele Optionen auswählen, wie Sie möchten. Sie müssen sie jedoch manuell auswählen. Wenn Sie die Möglichkeit haben, alle Optionen in Ihrem Kontrollkästchen gemeinsam auszuwählen, können Sie beim Ausfüllen Ihres Formulars Zeit sparen.

In diesem Tutorial zeigen wir Ihnen, wie einfach dies mit einem kleinen Codeschnipsel zu realisieren ist.

Erstellen des Formulars

Zunächst müssen Sie ein neues Formular erstellen und dann das Formularfeld " Checkbox" mit all Ihren Optionen zu Ihrem Formular hinzufügen. Wenn Sie Hilfe bei der Erstellung Ihres Formulars benötigen, lesen Sie bitte diese Dokumentation.

In diesem Tutorial setzen wir die erste Option des Kontrollkästchens ALLE DINGE an den Anfang des Formulars.

Hinzufügen des Snippets für die Option "Alles auswählen

Jetzt ist es an der Zeit, das Snippet zu Ihrer Website hinzuzufügen, das alle Optionen der Checkboxen auswählt, wenn eine bestimmte Option angeklickt wird.

Wenn Sie Hilfe beim Hinzufügen von Snippets zu Ihrer Website benötigen, lesen Sie bitte dieses 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">
		
		// 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 );

Im obigen Codeschnipsel sehen Sie die Zeile #wpforms-3535-field_8_1. Diese Zeile steht nicht nur für die Formular- und Feld-IDs, sondern auch für die Option, die unsere Auswahl aller Felder darstellt.

Lassen Sie uns diese Codezeile aufschlüsseln, um Ihnen zu zeigen, was die einzelnen Zahlen bedeuten.

• #wpforms-3535. Die 3535 steht für unsere Formular-ID.
• -feld_8. Die 8 steht für unsere Feld-ID.
• _1. Die letzte Zahl ist die, an der die Option Alles auswählen in unserer Liste erscheint. Wenn Sie sie als erste Option hinzugefügt haben, wird sie immer 1 sein. Wenn Sie Ihrem Kontrollkästchen 20 Optionen hinzufügen und die Option " Alles auswählen" zur letzten Option machen, wird diese Zahl 20 sein.

Wenn Sie Hilfe bei der Suche nach Ihrer Formular- oder Feld-ID benötigen, lesen Sie bitte diese Anleitung.

Jetzt können Ihre Besucher auf einfache Weise alle Optionen in Ihrem Formular auswählen.

Möchten Sie Bilder für Ihre Checkbox-Optionen verwenden? Werfen Sie einen Blick auf unser Tutorial über die Anwendung von Bildern auf Checkbox-Labels mit CSS.

Verwandte Seiten

Referenz der Aktion: wpforms_wp_footer_end

FAQ

F: Kann ich dieses Skript verwenden, wenn ich Image Choices für mein Checkbox-Feld verwende?

A: Auf jeden Fall! Dies funktioniert sowohl für Bild- als auch für Nicht-Bild-Checkbox-Formularfelder.

F: Wie kann ich die Option "Alles auswählen" aus den Formularbenachrichtigungen ausschließen?

A: Um die Option "Alles auswählen" auszuschließen, müssen Sie einen zusätzlichen Codeschnipsel hinzufügen.

/**
 * 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 ); 

Wie bei den anderen Schnipseln müssen Sie daran denken, den Text ALL THE THINGS so zu ändern, dass er mit dem Text übereinstimmt, den Sie für die Option select all festgelegt haben. Und die $checkboxes_field_id ist die Feld-ID, die für das Kontrollkästchen verwendet wird. Wenn Sie Hilfe bei der Suche nach Ihrer Feld-ID benötigen, lesen Sie bitte dieses Tutorial.