如何检查联系表格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!');
    }
});

});

PS：输入是一个自闭标签。 所以删除结束标签。 更多信息在这里。