fadeOut and fadeIn Div When Clicking Checkbox or its label

Question

I want to fadeOut if the checkbox is unchecked, and fadeIn if the checkbox is checked. Also I have the label clickable so the text next to the checkbox should ideally do the same. Heres what I have so far, it doesn't work but I'm not sure why:

$(document).ready(function () {
    $('#frequent1').on('change', function () {
        if (!this.checked) {
            $("#self").fadeOut;
        }
    });
});

HTML:

<label>
    <input type="checkbox" id="frequent1" name="frequent1" value="self" checked> This
    item: </label>

Answer 1

fadeOut is a jQuery function.

This:

$("#self").fadeOut;

needs to be this:

$("#self").fadeOut();

Answer 2

Do some corrections in your code,

1. create an element with id="self"

2. fadeOut and fadeIn are not the properties, they are method in jQuery, so use fadeIn() and fadeOut() .

 $(document).ready(function () { $('#frequent1').on('change', function () { if (!this.checked) { $("#self").fadeOut(); } else{ $("#self").fadeIn(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label> <input type="checkbox" id="frequent1" name="frequent1" value="self" checked> <span id="self">This item: </span> </label>