Cómo agregar una opción 'Seleccionar todo' a un campo de formulario de casilla de verificación

Introducción

¿Te gustaría añadir una opción de Seleccionar todo a tu campo de formulario Casilla de verificación? En algunos formularios, puede que tengas varias opciones para que tus visitantes elijan y solo quieras proporcionar una opción fácil para que el usuario seleccione todas las opciones rápidamente.

Por defecto, al usar el campo de formulario Casilla de verificación, puedes seleccionar tantas opciones como desees. Pero tienes que seleccionarlas manualmente. Ofrecer la opción de seleccionar todas las opciones en bloque en tu Casilla de verificación puede ahorrar tiempo para completar tu formulario.

En este tutorial, te mostraremos lo fácil que es implementar esto usando un pequeño fragmento de código.

Creación del formulario

Primero, necesitarás crear un nuevo formulario y luego añadir el campo de formulario Casilla de verificación a tu formulario con todas tus opciones. Si necesitas ayuda para crear tu formulario, por favor consulta esta documentación.

Para este tutorial, estamos colocando la primera opción de casilla de verificación de TODAS LAS COSAS en la parte superior del formulario.

Añadiendo el fragmento para la opción de seleccionar todo

Ahora es el momento de añadir el fragmento a tu sitio que permitirá seleccionar todas las opciones de casilla de verificación cuando se haga clic en una opción en particular.

Si necesitas ayuda para añadir fragmentos a tu sitio, consulta 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 );

En el fragmento de código anterior, notarás el #wpforms-3535-field_8_1. Esta línea representa no solo los IDs del formulario y del campo, sino también la opción que representa nuestro seleccionar todo.

Vamos a desglosar esa línea de código para mostrarte qué representa cada número.

• #wpforms-3535. El 3535 representa nuestro ID de formulario.
• -field_8. El 8 representa nuestro ID de campo.
• _1. El número final es dónde aparece la opción Seleccionar todo en nuestra lista. Si la añadiste como la primera opción, siempre será 1. Si añadiste 20 opciones a tu Casilla de verificación e hiciste de la opción Seleccionar todo la última opción, este número sería 20.

Si necesitas ayuda para localizar tu ID de formulario o campo, por favor revisa este tutorial.

Ahora tus visitantes tienen una forma fácil de seleccionar todas las opciones en tu formulario.

¿Te gustaría usar imágenes para tus opciones de Casilla de verificación? Echa un vistazo a nuestro tutorial sobre Cómo aplicar imágenes a las etiquetas de Casilla de verificación usando CSS.

Relacionado

Referencia de acción: wpforms_wp_footer_end

Preguntas frecuentes

P: ¿Puedo usar este script cuando uso Opciones de imagen para mi campo de Casilla de verificación?

R: ¡Absolutamente! Esto funcionará tanto para campos de formulario de Casilla de verificación con imágenes como sin ellas.

P: ¿Cómo puedo excluir la opción de seleccionar todo de las notificaciones del formulario?

R: Para excluir tu opción de seleccionar todo, necesitarás añadir un fragmento 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 ); 

Al igual que con los otros fragmentos, deberás recordar cambiar el texto ALL THE THINGS para que coincida con el texto que has establecido para la opción de seleccionar todo. Y $checkboxes_field_id es el ID del campo que se utiliza para la casilla de verificación. Si necesitas ayuda para encontrar tu ID de campo, consulta este tutorial.