CODEWITHSUNDEEP
javascriptjquery
UndefinedReference
UndefinedReference

Reputation: 1253

Showing a Div When Checkbox Is Clicked In JQuery

This code seems to show a div that disappears when the box is checked.

<script src="/js/jquery.js"></script>
<script type="text/javaScript">
    $(function() {
        $('input[type="checkbox"]').on('change', function() {
            $(this).closest('fieldset').find('.myClass').toggle(!this.checked);
        });
    });
</script>

<fieldset>
    <legend>Check Here<input type="checkbox"></legend>
    <span class="myClass">
        <p>This is the text.</p>
    </span>
</fieldset>

How can I change it to show the box ONLY when it's checked instead of before it's checked?

Edit: Changing it to/from !this.checked/this.checked, is not the solution.

Upvotes: 1

Views: 54

Answers (1)

dsgriffin
dsgriffin

Reputation: 68626

You'd use this.checked instead of !this.checked.

$(function() {
     $('input[type="checkbox"]').on('change', function() {
         $(this).closest('fieldset').find('.myClass').toggle(this.checked);
     });
});

You'd set .myClass to be initially hidden also:

span.myClass {
    display:none;
}

jsFiddle here.

Upvotes: 1

Related Questions