So fügen Sie eine Option „Alle auswählen“ zu einem Kontrollkästchen-Formularfeld hinzu

Einleitung

Möchten Sie Ihrem Kontrollkästchen-Formularfeld eine Option „Alle auswählen“ hinzufügen? Bei einigen Formularen haben Sie möglicherweise mehrere Optionen, aus denen Ihre Besucher wählen können, und Sie möchten einfach eine einfache Option bereitstellen, mit der der Benutzer schnell jede Option auswählen kann.

Standardmäßig können Sie beim Verwenden des Kontrollkästchen-Formularfelds so viele Optionen auswählen, wie Sie möchten. Sie müssen sie jedoch manuell auswählen. Die Option, alle Optionen in Ihrem Kontrollkästchen-Feld auf einmal auszuwählen, kann Zeit beim Ausfüllen Ihres Formulars sparen.

In diesem Tutorial zeigen wir Ihnen, wie einfach Sie dies mit einem kleinen Code-Snippet implementieren können.

Erstellung des Formulars

Zuerst müssen Sie ein neues Formular erstellen und dann das Kontrollkästchen-Formularfeld mit all Ihren Optionen zu Ihrem Formular hinzufügen. Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, lesen Sie bitte diese Dokumentation.

Für dieses Tutorial platzieren wir die erste Kontrollkästchen-Option von ALLE DINGE oben im Formular.

Hinzufügen des Snippets für die Option „Alle auswählen“

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

Wenn Sie Hilfe beim Hinzufügen von Snippets zu Ihrer Website benötigen, sehen Sie bitte dieses Tutorial an.

/**
 * 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 Code-Snippet werden Sie #wpforms-3535-field_8_1 bemerken. Diese Zeile repräsentiert nicht nur die Formular- und Feld-IDs, sondern auch die Option, die unser „Alle auswählen“ darstellt.

Lassen Sie uns diese Codezeile aufschlüsseln, um Ihnen zu zeigen, was jede Zahl darstellt.

• #wpforms-3535. Die 3535 repräsentiert unsere Formular-ID.
• -field_8. Die 8 repräsentiert unsere Feld-ID.
• _1. Die letzte Zahl gibt an, wo die Option „Alle auswählen“ in unserer Liste erscheint. Wenn Sie sie als erste Option hinzugefügt haben, ist sie immer 1. Wenn Sie 20 Optionen zu Ihrem Kontrollkästchen hinzugefügt und die Option „Alle auswählen“ als letzte Option festgelegt haben, wäre diese Zahl 20.

Wenn Sie Hilfe beim Auffinden Ihrer Formular- oder Feld-ID benötigen, lesen Sie bitte dieses Tutorial.

Jetzt haben Ihre Besucher eine einfache Möglichkeit, alle Optionen in Ihrem Formular auszuwählen.

Möchten Sie Bilder für Ihre Kontrollkästchen-Optionen verwenden? Sehen Sie sich unser Tutorial an So wenden Sie Bilder auf Kontrollkästchen-Labels mit CSS an.

Verwandt

Aktionsreferenz: wpforms_wp_footer_end

FAQ

F: Kann ich dieses Skript verwenden, wenn ich Bildauswahlen für mein Kontrollkästchenfeld verwende?

A: Absolut! Dies funktioniert sowohl für Bild- als auch für Nicht-Bild-Kontrollkästchen-Formularfelder.

F: Wie kann ich die Option „Alle auswählen“ von den Formularbenachrichtigungen ausschließen?

A: Um Ihre Option „Alle auswählen“ auszuschließen, müssen Sie einen zusätzlichen Code-Snippet 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 Snippets müssen Sie daran denken, den Text ALL THE THINGS zu ändern, damit er mit dem Text übereinstimmt, den Sie für die Option "Alle auswählen" festgelegt haben. Und $checkboxes_field_id ist die Feld-ID, die für die Checkbox verwendet wird. Wenn Sie Hilfe beim Auffinden Ihrer Feld-ID benötigen, sehen Sie sich dieses Tutorial an.