如何检查联系表 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>

问题：如何检查复选框是否被选中并相应地做'something'？

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

Answer 1

你的纯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：输入是一个self-closing标签。所以删除结束标签。更多信息 here.

Answer 2

您的 jQuery 在 WordPress 上的使用不正确。您可以将它插入到 CF7 编辑器中，但我建议将其缩小，这样 cf7 就不会 auto-p 它。

您不能只在 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>

如何检查联系表 7 中的复选框是否已选中？

How to check if a checkbox is checked in contact form 7?

javascript

wordpress

contact-form-7

contact-form