Come contare le selezioni delle caselle di controllo all'interno del tuo modulo

Introduzione

Vuoi contare le selezioni delle caselle di controllo all'interno del tuo modulo? Con un piccolo snippet, puoi far sì che il tuo modulo visualizzi automaticamente un conteggio delle selezioni che aumenta e diminuisce man mano che ogni selezione viene effettuata. In questo tutorial, ti guideremo passo dopo passo su come ottenere questo risultato.

Creazione del modulo

Innanzitutto, dovrai creare un nuovo modulo e aggiungere il tuo campo Checkbox al modulo. Se hai bisogno di aiuto per creare il tuo modulo, esamina questa documentazione.

Aggiungere un campo per contenere il conteggio delle selezioni delle caselle di controllo

Ora aggiungeremo un campo al tuo modulo che conterrà il conteggio man mano che le selezioni vengono effettuate.

Aggiungeremo un campo modulo Testo a riga singola che conterrà il conteggio nel tuo modulo.

Aggiungere lo snippet al tuo sito

Ora è il momento di aggiungere lo snippet al tuo sito che aggiornerà il conteggio man mano che le selezioni vengono selezionate e deselezionate.

Se hai bisogno di aiuto per aggiungere snippet al tuo sito, dai un'occhiata a questo 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 );

Questo snippet dovrà avere l'ID del modulo 374 per corrispondere all'ID del modulo per cui eseguirai questo snippet.

Inoltre, nello snippet, vedrai field_25 e field_27 che sono gli ID dei campi Checkbox e Testo a riga singola dal modulo.

Se hai bisogno di aiuto per trovare gli ID dei tuoi moduli e campi, esamina questo tutorial.

Dopo aver seguito tutti questi passaggi, man mano che i tuoi visitatori selezionano le caselle di controllo, il conteggio si aggiornerà dinamicamente nel campo.

E questo è tutto ciò di cui hai bisogno! Vuoi usare Smart Tag per le etichette delle tue caselle di controllo? Dai un'occhiata al nostro tutorial su Come elaborare gli Smart Tag nelle etichette delle caselle di controllo.

Correlati

Riferimento Azione: wpforms_wp_footer_end

FAQ

D: Posso ottenere un totale per etichetta della casella di controllo per tutti i campi casella di controllo in un singolo modulo?

R: Assolutamente. In questo esempio, vogliamo solo ottenere il conteggio delle caselle di controllo per quante volte l'etichetta Accetto è stata selezionata in tutte le caselle di controllo di questo modulo. Per ottenere questo risultato, usa invece questo snippet. Cambia semplicemente il testo Accetto per corrispondere al testo che stai cercando, oltre ad aggiornare gli ID del modulo e dei campi per il tuo sito. Se hai bisogno di aiuto per trovare gli ID dei tuoi moduli e campi, esamina questo 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 );