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 Caixa de seleção? Em alguns formulários, pode ter várias opções para os seus visitantes escolherem e você só quer fornecer uma opção fácil para permitir que o utilizador selecione todas as opções rapidamente.

Por defeito, ao usar o campo de formulário Caixa de seleção, pode selecionar quantas opções desejar. Mas tem de as selecionar manualmente. Dar a opção de selecionar em massa todas as opções na sua Caixa de seleção pode poupar tempo para completar o seu formulário.

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

Criação do formulário

Primeiro, terá de criar um novo formulário e depois adicionar o campo de formulário Caixa de seleção ao seu formulário com todas as suas opções. Se precisar de ajuda para criar o seu formulário, consulte esta documentação.

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

Adicionar 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 caixa de seleção quando uma opção específica for clicada.

Se precisar de ajuda para adicionar trechos 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, 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 o nosso selecionar tudo.

Vamos analisar 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 na nossa lista. Se a adicionou como a primeira opção – será sempre 1. Se adicionou 20 opções à sua Caixa de seleção 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, reveja este tutorial.

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

Gostaria de usar imagens para as suas opções de Caixa de seleção? Dê uma vista de olhos ao nosso tutorial sobre Como Aplicar Imagens a Rótulos de Caixa de Seleção Usando CSS.

Relacionado

Referência de Ação: wpforms_wp_footer_end

FAQ

P: Posso usar este script ao usar Escolhas de Imagem para o meu campo de Caixa de seleção?

R: Absolutamente! Isto funcionará tanto para campos de formulário Caixa de seleção com imagem como sem imagem.

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

R: Para excluir a sua opção selecionar tudo, precisará de 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 ); 

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