Como contar as selecções de caixas de verificação no seu formulário

Introdução

Gostaria de contar as selecções de caixas de verificação no seu formulário? Com um pequeno snippet, pode fazer com que o seu formulário apresente automaticamente uma contagem das selecções que aumenta e diminui à medida que cada seleção é feita. Neste tutorial, vamos guiá-lo através de cada passo para o conseguir.

Criar o formulário

Em primeiro lugar, tem de criar um novo formulário e adicionar o campo Checkbox ao formulário. Se precisar de ajuda para criar o seu formulário, consulte esta documentação.

Adicionar um campo para guardar a contagem das selecções da caixa de verificação

Agora vamos adicionar um campo ao seu formulário que conterá a contagem à medida que as selecções forem feitas.

Vamos adicionar um campo de formulário de texto de linha única que irá conter a contagem no seu formulário.

Adicionar o snippet ao seu site

Agora é altura de adicionar o snippet ao seu site que actualizará a contagem à medida que as selecções são marcadas e desmarcadas.

Se precisar de ajuda para adicionar snippets ao seu site, consulte este 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 );

Este snippet terá de ter o ID do formulário 374 para corresponder ao ID do formulário para o qual irá executar este snippet.

Também no snippet, verá o field_25 e o field_27 que são os IDs de campo que o campo Checkbox e Single Line Text do formulário.

Se precisar de ajuda para encontrar os IDs de formulários e campos, consulte este tutorial.

Depois de seguir todos estes passos, à medida que os seus visitantes selecionam as selecções da caixa de verificação, a contagem será actualizada dinamicamente no campo.

E é tudo o que precisa! Gostaria de utilizar etiquetas inteligentes nas suas etiquetas de caixa de verificação? Consulte o nosso tutorial sobre Como processar etiquetas inteligentes em etiquetas de caixa de verificação.

Relacionadas

Referência da ação: wpforms_wp_footer_end

FAQ

P: Posso obter um total pela etiqueta da caixa de verificação para todos os campos de caixa de verificação num único formulário?

R: Sem dúvida. Neste exemplo, apenas pretendemos obter a contagem da caixa de verificação para o número de vezes que a etiqueta Concordo foi selecionada em todas as caixas de verificação deste formulário. Para conseguir isso, use este snippet. Basta alterar o texto Concordo para corresponder ao texto que procura, bem como atualizar os IDs do formulário e do campo para o seu próprio site. Se precisar de ajuda para encontrar as IDs de formulário e campo, consulte este 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 );