Anzahl der Kontrollkästchenauswahlen in Ihrem Formular zählen

Einleitung

Möchten Sie die Anzahl der Kontrollkästchenauswahlen in Ihrem Formular zählen? Mit einem kleinen Code-Snippet können Sie in Ihrem Formular automatisch eine Zählung der Auswahlen anzeigen lassen, die sich erhöht und verringert, sobald eine Auswahl getroffen wird. In diesem Tutorial führen wir Sie Schritt für Schritt durch den Prozess, wie Sie dies erreichen können.

Erstellung des Formulars

Zuerst müssen Sie ein neues Formular erstellen und Ihr Kontrollkästchen-Feld zum Formular hinzufügen. Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, lesen Sie bitte diese Dokumentation.

Hinzufügen eines Feldes zur Aufnahme der Anzahl der Kontrollkästchenauswahlen

Nun fügen wir Ihrem Formular ein Feld hinzu, das die Anzahl der Auswahlen enthalten wird, sobald diese getroffen werden.

Wir fügen ein Einzeiliges Textfeld hinzu, das die Anzahl in Ihrem Formular speichern wird.

Hinzufügen des Snippets zu Ihrer Website

Jetzt ist es an der Zeit, das Snippet zu Ihrer Website hinzuzufügen, das die Anzahl aktualisiert, wenn die Auswahlen aktiviert und deaktiviert werden.

Wenn Sie Hilfe beim Hinzufügen von Snippets zu Ihrer Website benötigen, werfen Sie bitte einen Blick auf dieses Tutorial.

/*
 * Count checkbox selections
 *
 * @link  https://wpforms.com/developers/how-to-count-checkbox-selections-inside-your-form/
 */

function wpf_dev_checkbox_count() {
    ?>
    <script type="text/javascript">
		(function($) {
			
			//Count the checkbox selections on field ID 25 for the form ID 374
			var $checkboxes = $( '#wpforms-374-field_25 input[type="checkbox"]' );
			
			$checkboxes.change(function(){
				
				var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
				
				//Add the count to the field ID 27 for the form ID 374
				$( '#wpforms-374-field_27' ).val(countCheckedCheckboxes);
				
			});
		})(jQuery);	
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_checkbox_count', 10 );

Dieses Snippet muss die Formular-ID 374 haben, um mit der Formular-ID übereinzustimmen, für die Sie dieses Snippet ausführen werden.

Außerdem sehen Sie im Snippet die IDs field_25 und field_27, welche die Feld-IDs für das Kontrollkästchen- und das Einzeilige Textfeld aus dem Formular sind.

Wenn Sie Hilfe beim Finden Ihrer Formular- und Feld-IDs benötigen, lesen Sie bitte dieses Tutorial.

Nachdem Sie all diese Schritte befolgt haben, wird die Anzahl dynamisch im Feld aktualisiert, sobald Ihre Besucher die Kontrollkästchenauswahlen auswählen.

Und das ist alles, was Sie brauchen! Möchten Sie Smart Tags für Ihre Kontrollkästchen-Labels verwenden? Schauen Sie sich unser Tutorial an: Verarbeitung von Smart Tags in Kontrollkästchen-Labels.

Verwandt

Aktionsreferenz: wpforms_wp_footer_end

FAQ

F: Kann ich für alle Kontrollkästchen-Felder in einem Formular eine Gesamtzahl anhand des Kontrollkästchen-Labels abrufen?

A: Absolut. In diesem Beispiel möchten wir nur zählen, wie oft das Label Zustimmen in allen Kontrollkästchen dieses Formulars ausgewählt wurde. Um dies zu erreichen, verwenden Sie stattdessen dieses Snippet. Ändern Sie einfach den Text Zustimmen, um dem von Ihnen gesuchten Text zu entsprechen, und aktualisieren Sie Ihre Formular- und Feld-IDs für Ihre eigene Website. Wenn Sie Hilfe beim Finden Ihrer Formular- und Feld-IDs benötigen, lesen Sie bitte dieses Tutorial.

/*
 * Count checkbox selections with the label Agree
 *
 * @link  https://wpforms.com/developers/wpforms_frontend_output_success/ 
 */
 
function wpf_dev_checkbox_count() {
    ?>
    <script type="text/javascript">
        (function($) {
			
			//Count all the checkbox selections in the form ID 374
            var $checkboxes = $( '#wpforms-form-374 input[type="checkbox"]' );
             
            $checkboxes.change(function(){
                
				let total = 0;
				$checkboxes.each( function( index ) {
					
					// Look for any checkboxes on this form field that are checked and also match the word Agree and count them
					if( $(this).is(":checked") && $(this).next().text() == "Agree" ) {
					   total ++;
					}
					
				});
				
                //Add the count to the field ID 27 for the form ID 374
                $( '#wpforms-374-field_27' ).val(total);
                 
            });
        })(jQuery); 
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_checkbox_count', 10 );