Como Adicionar uma Opção Selecionar Tudo a um Campo de Formulário de Caixa de Seleção

Introdução

Gostaria de adicionar uma opção Selecionar Tudo ao seu campo de formulário Checkbox? Em alguns formulários, você pode ter várias opções para seus visitantes escolherem e você só quer fornecer uma opção fácil para permitir que o usuário selecione todas as opções rapidamente.

Por padrão, ao usar o campo de formulário Checkbox, você pode selecionar quantas opções desejar. Mas você tem que selecioná-las manualmente. Oferecer a opção de selecionar em massa todas as opções no seu Checkbox pode economizar tempo para preencher seu formulário.

Neste tutorial, mostraremos como é fácil implementar isso usando um pequeno trecho de código.

Criando o formulário

Primeiro, você precisará criar um novo formulário e, em seguida, adicionar o campo de formulário Checkbox ao seu formulário com todas as suas opções. Se precisar de ajuda para criar seu formulário, consulte esta documentação.

Para este tutorial, estamos colocando a primeira opção de checkbox de TODAS AS COISAS no topo do formulário.

Adicionando o trecho para a opção selecionar tudo

Agora é hora de adicionar o trecho ao seu site que permitirá selecionar todas as opções de checkbox quando uma opção específica for clicada.

Se precisar de ajuda para adicionar snippets ao seu site, consulte este tutorial.

/**
 * Add a select all option to the checkbox
 *
 * @link https://wpforms.com/developers/how-to-add-a-select-all-option-to-a-checkbox-form-field/
 */
 
function wpf_dev_select_all() {
    ?>
    <script type="text/javascript">
		
		// Look for the form ID (-3535-), field ID (_8), and the first option inside the checkbox (_1)
		// Find these ids by viewing this tutorial https://wpforms.com/developers/how-to-locate-form-id-and-field-id/
        jQuery( "#wpforms-3535-field_8_1" ).change(function(){
            var $this = jQuery(this),
                $list = $this.closest( 'ul' );
            if ( $this.is( ':checked' ) ) {
                $list.find( 'li' ).addClass( 'wpforms-selected' );
                $list.find( 'input' ).prop( 'checked', true );
            } else {
                $list.find( 'li' ).removeClass( 'wpforms-selected' );
                $list.find( 'input' ).prop( 'checked', false );
            }
        });
		
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_select_all', 10 );

No trecho de código acima, você notará o #wpforms-3535-field_8_1. Esta linha representa não apenas os IDs do formulário e do campo, mas também a opção que representa nosso selecionar tudo.

Vamos detalhar essa linha de código para mostrar o que cada número representa.

• #wpforms-3535. O 3535 representa o ID do nosso formulário.
• -field_8. O 8 representa o ID do nosso campo.
• _1. O número final é onde a opção Selecionar Tudo aparece em nossa lista. Se você a adicionou como a primeira opção, ela sempre será 1. Se você adicionou 20 opções ao seu Checkbox e fez da opção Selecionar Tudo a última opção, este número seria 20.

Se precisar de ajuda para localizar o ID do seu formulário ou campo, revise este tutorial.

Agora seus visitantes têm uma maneira fácil de selecionar todas as opções em seu formulário.

Gostaria de usar imagens para suas opções de Checkbox? Dê uma olhada em nosso tutorial sobre Como Aplicar Imagens aos Rótulos de Checkbox Usando CSS.

Relacionado

Referência de Ação: wpforms_wp_footer_end

Perguntas Frequentes

P: Posso usar este script ao usar Escolhas de Imagem para meu campo Checkbox?

R: Com certeza! Isso funcionará tanto para campos de formulário Checkbox com imagem quanto sem imagem.

P: Como posso excluir a opção selecionar tudo das notificações do formulário?

R: Para excluir sua opção selecionar tudo, você precisará adicionar um trecho de código adicional.

/**
 * Exclude select all option from the email notifications
 *
 * @link https://wpforms.com/developers/how-to-add-a-select-all-option-to-a-checkbox-form-field/
 */

function wpf_dev_process_filter( $fields, $entry, $form_data ) {
	
    // Only run on my form with ID = 3535
    if( $form_data[ 'id' ] != 3535 ) {
        return $fields;
    }
	
	// Enter the text for the select all option
	$select_all_option = 'ALL THE THINGS';
	
	// Enter the field ID for the checkbox with the select all option
	$checkboxes_field_id = 8;
	
	if( strpos(  $fields[ $checkboxes_field_id ][ 'value' ], $select_all_option ) !== false ){

		$fields[ $checkboxes_field_id ][ 'value' ] = str_replace( $select_all_option, '', $fields[ $checkboxes_field_id ][ 'value' ] ); 
		
		$fields[ $checkboxes_field_id] [ 'value_raw' ] = str_replace( $select_all_option, '', $fields[ $checkboxes_field_id] [ 'value_raw' ] ); 
	}
	
	return $fields;
}

add_filter( 'wpforms_process_filter', 'wpf_dev_process_filter', 10, 3 ); 

Assim como nos outros trechos, você precisará se lembrar de alterar o texto ALL THE THINGS para corresponder ao texto que você definiu para a opção selecionar tudo. E $checkboxes_field_id é o ID do campo usado para a caixa de seleção. Se precisar de ajuda para encontrar o ID do seu campo, consulte este tutorial.