Cómo contar selecciones de casillas de verificación dentro de tu formulario

Introducción

¿Le gustaría contar las selecciones de casillas de verificación dentro de su formulario? Con un pequeño fragmento, puede hacer que su formulario muestre automáticamente un recuento de las selecciones que aumentan y disminuyen a medida que se realiza cada selección. En este tutorial, le guiaremos paso a paso sobre cómo lograr esto.

Creación del formulario

Primero, deberá crear un nuevo formulario y agregar su campo de Casilla de verificación al formulario. Si necesita ayuda para crear su formulario, revise esta documentación.

Añadir un campo para almacenar el recuento de las selecciones de casillas de verificación

Ahora vamos a añadir un campo a su formulario que contendrá el recuento a medida que se realicen las selecciones.

Vamos a añadir un campo de formulario de Texto de una sola línea que contendrá el recuento en su formulario.

Añadir el fragmento a su sitio

Ahora es el momento de añadir el fragmento a su sitio que actualizará el recuento a medida que se marquen y desmarquen las selecciones.

Si necesita ayuda para añadir fragmentos a su sitio, eche un vistazo a este 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 fragmento necesitará tener el ID del formulario 374 para que coincida con el ID del formulario para el que ejecutará este fragmento.

También en el fragmento, verá los field_25 y field_27 que son los IDs de campo del campo de Casilla de verificación y Texto de una sola línea del formulario.

Si necesita ayuda para encontrar los IDs de sus formularios y campos, revise este tutorial.

Después de seguir todos estos pasos, a medida que sus visitantes seleccionen las casillas de verificación, el recuento se actualizará dinámicamente en el campo.

¡Y eso es todo lo que necesita! ¿Le gustaría usar Smart Tags para las etiquetas de sus casillas de verificación? Eche un vistazo a nuestro tutorial sobre Cómo procesar Smart Tags en las etiquetas de casillas de verificación.

Relacionado

Referencia de acción: wpforms_wp_footer_end

Preguntas frecuentes

P: ¿Puedo obtener un total por la etiqueta de la casilla de verificación para todos los campos de casilla de verificación en un solo formulario?

R: Absolutamente. En este ejemplo, solo queremos obtener el recuento de casillas de verificación de cuántas veces se seleccionó la etiqueta Aceptar en todas las casillas de verificación de este formulario. Para lograr esto, use este fragmento en su lugar. Simplemente cambie el texto Aceptar para que coincida con el texto que está buscando, así como para actualizar los IDs de formulario y campo para su propio sitio. Si necesita ayuda para encontrar los IDs de sus formularios y campos, revise 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 );