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

Introdução

E é tudo o que precisa! Gostaria de usar Smart Tags para os seus rótulos de caixa de seleção? Dê uma vista de olhos no nosso tutorial sobre Como Processar Smart Tags em Rótulos de Caixa de Seleção.

Criação do formulário

Primeiro, terá de criar um novo formulário e adicionar o seu campo Caixa de seleção ao formulário. Se precisar de ajuda para criar o seu formulário, por favor, consulte esta documentação.

Adicionar um campo para conter a sua contagem das seleções de caixas 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 Texto de Linha Única que conterá a contagem no seu formulário.

Adicionar 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 alguma ajuda para adicionar trechos de código ao seu site, por favor, dê uma vista de olhos 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á de ter o ID do formulário 374 para corresponder ao ID do formulário para o qual executará este trecho de código.

Também no trecho de código, 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 alguma ajuda para encontrar os IDs do seu formulário e campos, por favor, consulte este tutorial.

Após seguir todos estes passos, à medida que os seus visitantes selecionarem as caixas de seleção, a contagem será atualizada dinamicamente no campo.

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

Relacionado

Referência de Ação: wpforms_wp_footer_end

FAQ

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

R: Absolutamente. 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 isto, use este trecho de código em vez disso. Basta alterar o texto Concordo para corresponder ao texto que procura, bem como atualizar os IDs do seu formulário e campos para o seu próprio site. Se precisar de alguma ajuda para encontrar os IDs do seu formulário e campos, por favor, 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 );