Come aggiungere un'opzione Seleziona tutto a un campo modulo con caselle di controllo

Introduzione

Vuoi aggiungere un'opzione Seleziona tutto al tuo campo modulo Checkbox? In alcuni moduli, potresti avere diverse opzioni tra cui i tuoi visitatori possono scegliere e vuoi solo fornire un'opzione semplice per consentire all'utente di selezionare rapidamente ogni opzione.

Per impostazione predefinita, quando si utilizza il campo modulo Checkbox, è possibile selezionare tutte le opzioni desiderate. Ma devi selezionarle manualmente. Fornire l'opzione per selezionare in blocco tutte le opzioni nel tuo Checkbox può farti risparmiare tempo per completare il tuo modulo.

In questo tutorial, ti mostreremo quanto è facile implementare questo utilizzando un piccolo snippet di codice.

Creazione del modulo

Per prima cosa, dovrai creare un nuovo modulo e quindi aggiungere il campo modulo Checkbox al tuo modulo con tutte le tue opzioni. Se hai bisogno di aiuto nella creazione del tuo modulo, consulta questa documentazione.

Per questo tutorial, stiamo inserendo la prima opzione di checkbox di TUTTE LE COSE in cima al modulo.

Aggiunta dello snippet per l'opzione seleziona tutto

Ora è il momento di aggiungere lo snippet al tuo sito che consentirà di selezionare tutte le opzioni di checkbox quando viene cliccata una particolare opzione.

Se hai bisogno di aiuto nell'aggiungere snippet al tuo sito, consulta questo 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 );

Nello snippet di codice sopra, noterai #wpforms-3535-field_8_1. Questa riga rappresenta non solo gli ID del modulo e del campo, ma anche l'opzione che rappresenta il nostro seleziona tutto.

Analizziamo quella riga di codice per mostrarti cosa rappresenta ogni numero.

• #wpforms-3535. Il 3535 rappresenta il nostro ID modulo.
• -field_8. L'8 rappresenta il nostro ID campo.
• _1. L'ultimo numero indica dove appare l'opzione Seleziona tutto nel nostro elenco. Se l'hai aggiunta come prima opzione, sarà sempre 1. Se hai aggiunto 20 opzioni al tuo Checkbox e hai reso l'opzione Seleziona tutto l'ultima opzione, questo numero sarebbe 20.

Se hai bisogno di aiuto per localizzare il tuo ID modulo o campo, consulta questo tutorial.

Ora i tuoi visitatori hanno un modo semplice per selezionare tutte le opzioni nel tuo modulo.

Vuoi usare immagini per le tue opzioni di Checkbox? Dai un'occhiata al nostro tutorial su Come applicare immagini alle etichette delle checkbox usando CSS.

Correlati

Riferimento Azione: wpforms_wp_footer_end

FAQ

D: Posso usare questo script quando uso Scelte Immagine per il mio campo Checkbox?

R: Assolutamente! Questo funzionerà sia per i campi modulo Checkbox con immagini che senza.

D: Come posso escludere l'opzione seleziona tutto dalle notifiche del modulo?

R: Per escludere la tua opzione seleziona tutto, dovrai aggiungere uno snippet di codice aggiuntivo.

/**
 * 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 ); 

Come con gli altri snippet, dovrai ricordarti di cambiare il testo TUTTE LE COSE per farlo corrispondere al testo che hai impostato per l'opzione Seleziona tutto. E $checkboxes_field_id è l'ID del campo utilizzato per la casella di controllo. Se hai bisogno di aiuto per trovare il tuo ID campo, consulta questo tutorial.