Para empezar, este es mi HTML :
<p> <span class="wpcf7-form-control-wrap checkbox-770"> <span class="wpcf7-form-control wpcf7-checkbox" id="Personal"> <span class="wpcf7-list-item first last"> <label> <input type="checkbox" name="checkbox-770[]" value="buisness"> <span class="wpcf7-list-item-label">buisness </span> </label> </span> </span> </span> <br> <span class="wpcf7-form-control-wrap checkbox-771"> <span class="wpcf7-form-control wpcf7-checkbox" id="buisness"> <span class="wpcf7-list-item first last"> <label> <input type="checkbox" name="checkbox-771[]" value="Personal"> <span class="wpcf7-list-item-label">Personal </span> </label> </span> </span> </span> </p> Y simplemente quiero verificar si esas 2 entradas de casilla de verificación están marcadas o no, con 2 declaraciones if separadas usando Jquery.
Jquery (que probé hasta ahora):
document.addEventListener( 'wpcf7mailsent', function( event ) { jQuery(function($) { if ($('#Personal > input').is(':checked')) { alert('dataLayer Business Pushed!'); } else { alert('If statement did not work!'); } if ($('#buisness > input').is(':checked')) { alert('dataLayer Personal Pushed!'); } }); }, false ); El código Jquery anterior tiene 2 líneas especiales (la primera y la última) que están relacionadas con el formulario de contacto 7 (un complemento para wordpress) y su propósito es agregar un detector de eventos que en este caso ejecutará lo que tenga dentro del detector de eventos. corchetes al enviar un formulario. Tenga en cuenta que este código se ejecuta sin errores y devuelve el comando alert() que he anidado dentro de la declaración else .
Pregunta : ¿Qué estoy escribiendo incorrectamente en mi código Jquery y cómo puedo marcar las casillas de verificación usando Jquery según el HTML que escribí anteriormente?
Para acceder a los datos del formulario en el evento wpcf7mailsent , debe usar event.detail.inputs
<script>document.addEventListener( 'wpcf7submit', function( event ) { let inputs = event.detail.inputs; for ( let i = 0; i < inputs.length; i++ ) { if ( 'checkbox-770[]' == inputs[i].name ) { alert( 'checkbox 770 is checked' ); } else if ('checkbox-771[]' === inputs[i].name ){ alert( 'checkbox 771 is checked' ); } } }, false ); </script>Sería más simple usar algún tipo de verificador en el HTML, creo.
Por ejemplo:
<input type="checkbox" checked={props.completed} />si marca props.completed para verdadero/falso en su archivo jquery, debería ver si está marcado o no
Como no puede cambiar el archivo HTML, solo tendrá que usar los ID que tienen las casillas de verificación. Tal vez algo como esto funcione para ti.
//using jQuery if($('#katoikiamou').is(':checked')){ } //or if($('#epixeirisimou').is(':checked')){ } $("input[type='checkbox']").val(); $('#check_id').val(); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>no estoy completamente seguro, pero espero que ayude un poco