Como Contar Seleções de Caixa de Seleção Dentro do Seu Formulário

Introdução

Gostaria de contar as seleções de caixa de seleção dentro do seu formulário? Com um pequeno trecho de código, você pode fazer com que seu formulário exiba automaticamente uma contagem das seleções que aumenta e diminui à medida que cada seleção é feita. Neste tutorial, vamos guiá-lo por cada etapa de como conseguir isso.

Criando o formulário

Primeiro, você precisará criar um novo formulário e adicionar seu campo de Caixa de Seleção ao formulário. Se precisar de ajuda para criar seu formulário, revise esta documentação.

Adicionando um campo para conter a contagem das seleções da caixa de seleção

Agora vamos adicionar um campo ao seu formulário que conterá a contagem à medida que as seleções são feitas.

Vamos adicionar um campo de formulário de Texto de Linha Única que conterá a contagem em seu formulário.

Adicionando o trecho de código ao seu site

Agora é hora de adicionar o trecho de código ao seu site que atualizará a contagem à medida que as seleções são marcadas e desmarcadas.

Se precisar de ajuda para adicionar trechos de código ao seu site, dê uma olhada neste 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 trecho de código precisará ter o ID do formulário 374 para corresponder ao ID do formulário para o qual você executará este trecho de código.

Também no trecho de código, você verá o field_25 e o field_27, que são os IDs dos campos para o campo Caixa de Seleção e Texto de Linha Única do formulário.

Se precisar de ajuda para encontrar os IDs do seu formulário e campos, revise este tutorial.

Após seguir todas essas etapas, à medida que seus visitantes selecionarem as opções da caixa de seleção, a contagem será atualizada dinamicamente no campo.

E é tudo o que você precisa! Gostaria de usar Smart Tags para os rótulos das suas caixas de seleção? Dê uma olhada em nosso tutorial sobre Como Processar Smart Tags em Rótulos de Caixa de Seleção.

Relacionado

Referência de Ação: wpforms_wp_footer_end

Perguntas Frequentes

P: Posso obter um total pelo rótulo da caixa de seleção para todos os campos de caixa de seleção em um único formulário?

R: Com certeza. Neste exemplo, queremos apenas obter a contagem da caixa de seleção para quantas vezes o rótulo Concordo foi selecionado em todas as caixas de seleção deste formulário. Para conseguir isso, use este trecho de código em vez disso. Apenas altere o texto Concordo para corresponder ao texto que você está procurando, bem como atualizando os IDs do seu formulário e campos para o seu próprio site. Se precisar de ajuda para encontrar os IDs do seu formulário e campos, revise 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 );