如何使用 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>

我想简单地检查这两个复选框输入是否被选中，两个单独的if statements使用Jquery 。

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 special lines （第一行和最后一行）与联系表格 7 （wordpress 插件）相关，它们的目的是添加一个Event listener器，在这种情况下，它将执行我在Event Listener's任何内容提交表格时的括号。 请注意，此代码运行时没有错误，它返回我嵌套在else语句中的alert()命令。

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

预先感谢您的宝贵努力和帮助。

Answer 1

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

例如：

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

如果你在 jquery 文件中检查 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>