Contact form 7 checkbox Check

Question

My contact form 7 checkbox elements are like this,

[checkbox vitesturu id:checkbox3 use_label_element exclusive "Engelli"]

[checkbox vitesturu id:checkbox2  use_label_element exclusive "Manuel Vites (Düz)"]

I want to print value to input value when checkbox is clicked.

<input type="text" id="textbox2" />

The js code I use is like this.

$(document).ready(function() {   
        // Returns male in textbox2 if checkbox2 checked.
        $('#checkbox2').click(function() {
            if ($('#checkbox2').is(":checked") == true) {
                $('#textbox2').val('Male');
            } else {
                $('#textbox2').val('');
            }
        });
     
        // Returns female in textbox2
        // if checkbox2 checked.
        $('#checkbox3').change(function() {
            if ($('#checkbox3').is(":checked") == true) {
                $('#textbox2').val('Female');
            } else {
                $('#textbox2').val('');
            }
        });
    });

However, this is not working. I guess I can't select the checkbox component. What is the problem?

Answer 1

you need to check the :checked on the checkbox input directly, but Contact Form 7 adds the id to the wrapping element.

The solution is this:

$(document).ready(function() {
    // Returns male in textbox2 if checkbox2 checked.
    $('#checkbox2').change(function() {
        // CHANGED THIS SELECTOR
        if ($('#checkbox2 input').is(':checked')) {
            $('#textbox2').attr('value', 'Male');
        } else {
            $('#textbox2').attr('value', '');
        }
    });

    // Returns female in textbox2
    // if checkbox2 checked.
    $('#checkbox3').change(function() {
        // CHANGED THIS SELECTOR
        if ($('#checkbox3 input').is(':checked')) {
            $('#textbox2').attr('value', 'Female');
        } else {
            $('#textbox2').attr('value', '');
        }
    });

});