2

I would like to add/remove a new div when the corresponding checkbox is checked/unchecked with jQuery. Here's my attempt:

<script type="text/javascript">
    $(function() {
        $("#form1 :checkbox#checkbox1").click(function() {
            var d = document.createElement('div');
            if ($(this).is(":checked")) {
                $(d).addClass("newdiv")
                    .html("This is a new div")
                    .appendTo($("#mydiv"))
                    .hide()
                    .fadeIn(1000);
                }
            else {
                //$(".newdiv").fadeOut(1000);
                $(d).fadeOut(1000);
            }
        });
    });
</script>

The fadeIn process comes out smoothly. But when I tried to fadeOut $(d) using the same methodology, it didn't work: the new generated div remained on the page. I did some research and get a work around, with $(".newdiv").fadeOut(1000); (commented in the code above), but that's not the best solution for me I think. And also I really want to know why my first attempt didn't work. Any suggestions? Thanks.

Improve this question
3
  • Why is $(".newdiv").fadeOut(1000); not a good solution? If you want to be more specific you can use an ID instead of a class. Commented Mar 22, 2013 at 3:09
  • If you want to use $(d), you could declare d as a global variable. The reason it doesn't work is because you're creating a new div every time the checkbox is clicked. Commented Mar 22, 2013 at 3:11
  • @rsbarro Oops! I'm really a dumb...It seems so obvious to me now. Thanks to all. Commented Mar 22, 2013 at 3:44

3 Answers 3

Reset to default
1

There are few changes you can make
1. No need for the selector #form1 :checkbox#checkbox1 since you have an id for the checkbox, you can just use #checkbox1
2. Create the div using jQuery instead of using createElement $('<div/>')
3. After fading out the div you need to remove it from the dom

$(function() {
    $("#checkbox1").click(function() {
        if ($(this).is(":checked")) {
            $('<div/>').addClass("newdiv")
            .html("This is a new div")
            .appendTo($("#mydiv"))
            .hide()
            .fadeIn(1000);
        }
        else {
            $('#mydiv .newdiv').fadeOut(function(){
                $(this).remove()
            })
        }
    });
});

Demo: Fiddle

Another solution is to have a static div which will be shown and hidden

$(function() {
    var div = $('<div/>').addClass("newdiv")
            .html("This is a new div")
            .appendTo($("#mydiv"))
            .hide();
    $("#checkbox1").click(function() {
        if ($(this).is(":checked")) {
            div.fadeIn(1000);
        } else {
            div.fadeOut(1000)
        }
    });
});

Demo: Fiddle

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

jsFiddle Demo

Every time your click handler runs, you're creating a new variable d with a new element. Instead, do that before the click handler, so each instance will reference the same element. I have included other optional improvements below.

A change event is more appropriate for checkboxes. Also, notice I made your selector just #checkbox1, since that is already unambiguous and maximally specific.

To get a better visual effect, don't add the element, hide it, then fade it in. In most browsers that will show the element flicker before it appears. Instead, use a class to hide it with css: .hidden {display: none;}. You can also use fadeToggle to toggle the visibility, instead of doing if/else. clearQueue removes extra events for multiple clicks during a transition, and makes transitions appear smoother.

Finally, use jQuery to create the element:

$(function () {
    var $d = $('<div>', {
        "class": "hidden",
        text: "This is a new div"
    }).appendTo("#mydiv");

    $("#checkbox1").change(function () {
        $d.clearQueue()
          .stop()
          .fadeToggle(1000);
    });
});
Improve this answer

Comments

-1

You better make d a jQuery object.

<script type="text/javascript">
    $(function() {
        $("#checkbox1").click(function() {
            var d = $('<div class="newdiv"></div>');
            if ($(this).is(":checked")) {
                d.html("This is a new div")
                .appendTo($("#mydiv"))
                .hide()
                .fadeIn(1000);
                }
            else {
                d.fadeOut(1000);
            }
        });
    });
</script>
Improve this answer

1 Comment

This still doesn't work. Every time a click is fired, a new element is created and d refers to that new element, not to the previously created <div>. Therefore it cannot fade the previous one out.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.