如何使用 Jquery 检查是否选中了 2 Contact Form 7 复选框输入？

Question

首先这是我的 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>

我想简单地检查这 2 个复选框输入是否被选中，使用 Jquery.

的 2 个单独的 if 语句

Jquery（到目前为止我试过了）：

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

上面的 Jquery 代码有 2 行特殊行（第一行和最后一行）与 Contact form 7（wordpress 的插件）相关，它们的目的是添加一个事件侦听器，其中这种情况将在提交表单时执行事件监听器括号内的任何内容。注意这段代码运行时没有错误，它returns我嵌套在else语句中的alert()命令。

问题: 我在 Jquery 代码中输入的错误是什么？如何根据上面写的 HTML 使用 Jquery 检查复选框？

Answer 1

我认为在 HTML 中使用某种检查器会更简单。

例如：

   <input type="checkbox" checked={props.completed} />

如果您在 jquery 文件中为 true/false 检查 props.completed，您应该看看它是否被检查

Answer 2

由于您无法更改 HTML 文件，因此您只需要使用复选框具有的 ID。也许这样的东西对你有用。

//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>

不太确定，但希望能有所帮助

Answer 3

要在 wpcf7mailsent 事件中访问表单数据，您必须使用 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>

如何使用 Jquery 检查是否选中了 2 Contact Form 7 复选框输入？

How can I check if 2 Contact Form 7 checkbox inputs are checked or not, with the use of Jquery?

javascript

forms

wordpress

jquery

contact-form-7