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

Question

To begin with, I have a contact form that looks like this:

The contact form 7 editor code is:

<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"]

I want to check if the checkbox I have is checked and if it's checked I Want to track the contact form fields. But I struggle to find a way to achieve the if statement check.

I used this piece of javascript but it doesn't work at all:

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

Question : How can I check if the checkbox is checked or not and accordingly do 'something'?

Note : Feel free to give brief explanation of where or why I should use what you will suggest me to, plus make sure to let me know if using the code in the contact form 7 editor is ok or not.

Answer 1

Your jQuery is incorrect for usage on WordPress. You can insert it into the CF7 Editor, but I would recommend minifying it so that cf7 doesn't auto-p it.

You can't just use $ in Wordpress.

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

Minified it would look like this:

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

Answer 2

Your pure JS is correct. Maybe the input field is not rendered, when your JS runs the first time. That could be the reason, why the event handler (change) is not set. Try the following JS:

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

});

PS: input is a self-closing tag. So remove the closing tag. More informations here .