如何检查联系表格7中是否选中了复选框？

Question

首先，我有一个如下所示的联系表：

contact form 7 editor 代码是：

<input type="checkbox" id="katoikia" name="tracking-777">Tracking Acceptance</input>

<label> Your Name:
    [text* your-name] </label>

<label> Email:
    [email* your-email] </label>

<label> Subject
    [text* your-subject] </label>

<label> Your message (optional):
    [textarea your-message] </label>

[submit "Submit"]

我想检查我的复选框是否被选中，如果它被选中，我想跟踪联系表单字段。但我很难找到实现if statement 检查的方法。

我用过这段javascript，但是完全不行：

<script>
    $(document).ready(function() {
    $('#katoikia').change(function() {
        // CHANGED THIS SELECTOR
        if ($('#katoikia').is(':checked')) {
            alert('Checked');
        } else {
            alert('Unchecked!');
        }
    });
});
</script>

问题：如何检查复选框是否被选中并相应地执行“某事”？

注意：请随时简要说明我应该在哪里或为什么要使用您建议我使用的内容，如果可以使用 contact form 7 editor 中的代码，请务必告诉我与否。

Answer 1

您的 jQuery 不适合在 WordPress 上使用。您可以将其插入到 CF7 编辑器中，但我建议将其缩小，以便 cf7 不会自动对其进行处理。

您不能只在 Wordpress 中使用 $。

<script>
    jQuery(function($) {
        $('#katoikia').on('change', function() {
            // CHANGED THIS SELECTOR
            if ($('#katoikia').is(':checked')) {
                alert('Checked');
            } else {
                alert('Unchecked!');
            }
        });
    });
</script>

缩小后看起来像这样：

<script>jQuery(function(e){e("#katoikia").on("change",function(){e("#katoikia").is(":checked")?alert("Checked"):alert("Unchecked!")})});</script>

Answer 2

你的纯 JS 是正确的。当您的 JS 第一次运行时，可能未呈现输入字段。这可能是未设置事件处理程序（更改）的原因。试试下面的 JS：

$(document).ready(function() {
$(document).on("change", "#katoikia", function() {
    // CHANGED THIS SELECTOR
    if ($('#katoikia').is(':checked')) {
        alert('Checked');
    } else {
        alert('Unchecked!');
    }
});

});

P.S：输入是一个自闭合标签。所以删除结束标签。更多信息here.