Question

I’m a designer trying to learn Jquery and I’m having a problem with a current project. I need to be able to click a checkbox which in turn reveals a div. For each checkbox clicked a different div must be generated. I thought a switch function would do the trick but I haven’t been able to figure out how to implement it. Here is what I have so far:

<div">
    <input type="checkbox" id="test1" />
</div>
<div>
    <input type="checkbox" id="test2" />
</div>

<script type="text/javascript">

$(function () {
    $(':checkbox').click(function () {
        if ($(this).prop('checked', true)) {
            switch(this.id) {

                    case "test1";
                    var newDiv = $('<div><p>it worked!!</p></div>');

            break;

            case "test2";
                    var newDiv = $('<div><p>it worked again!!</p></div>');

            break;

            default;
            }
            newDiv.insertAfter($(this));

            $(this).after(newDiv);
        } else {
            $(this).next().filter('div').remove();
        }
    });
});

</script>

I hope someone can help!

Answer 1

So much wrong is so little…

First problem is:

switch(this.id)

Which should be:

switch($(this).attr('id')) // Need to wrap in jQuery object

Also, your switch statement is wrong. Notice the : after case and not ; as you have.

switch(n) {
    case 1:
        // Something
        break;
    case 2:
        // Something
        break;
    default:
        // Something
}

You need to declare newDiv outside the switch statement to access it later.
Then, these one after another makes no sense, they do the same thing

newDiv.insertAfter($(this)); // Keep this one
$(this).after(newDiv);

And, you have an extra " in your html, which was probably put by mistake…

<div">

Finally, you’re mixing double quotes and single quotes which will give you headaches later on. I suggest you choose one or the other.