Question

I am trying to have append and show methods if a check box is checked, problem is that both the methods do not work at the same time.It shows either the div or append the table.How can i have both the table and div if the check box is checked?

here is the code:

<input type="checkbox"  name="want_nl" id="want_nl" value="newsletters" />age

<div id="div1" class="tb" style="background-color:#0099CC">your img here</div>

<table cellpadding="0" cellspacing="0" border="1" width="100%"  id="newsletters"></table>

$(function(){
$("input[name=want_nl]").click(function(){
        if ($(this).is(":checked"))
        {

            $('#newsletters').append('<table id="newsletter_types"></table>');
            $('#newsletter_types').append('<tr><td colspan="3" ><strong>Optioneel</strong></td></tr>');
            $('#newsletter_types').append('<td valign="top">Zoet-houdertje Chocolade lollys</td>');
            $('#newsletter_types').append('<td valign="top" >15 stuks a &euro; 22,50</td>');
            $('#newsletter_types').append('<td valign="top">uuu</td></tr>');
            $('.tb').show();
        }
        else

            $("#newsletter_types").remove();
            $('.tb').hide();
    });

}); 

Answer 1

The show/hide problem is a missing pair of curly braces. You have this:

else
    $("#newsletter_types").remove();
    $('.tb').hide();

… which is the same as this:

else
{
    $("#newsletter_types").remove();
}
$('.tb').hide();

…where you meant:

else
{
    $("#newsletter_types").remove();
    $('.tb').hide();
}

Separately, there is a problem with your code creating the table on-the-fly (you’re adding cells without rows). Also, $(this).is(':checked') is a very, very convoluted way of finding out if a checkbox element is checked. Just use its checkedproperty directly.

Here’s a quick edit, changed lines flaged with ** (you may have to scroll right to see them). I just added rows around any cells that didn’t have them; you’ll need to make sure they’re in the right place(s):

$("input[name=want_nl]").click(function(){
        if (this.checked)                                                          // ** Simplified `checked `check
        {
            // ** below, do just *one* append
            $('#newsletters').append(
                '<table id="newsletter_types">' +
                '<tr><td colspan="3"><strong>Optioneel</strong></td></tr>' +
                '<tr><td valign="top">Zoet-houdertje Chocolade lollys</td></tr>' + // ** Added `tr`
                '<tr><td valign="top" >15 stuks a &euro; 22,50</td></tr>' +        // ** Added `tr`
                '<tr><td valign="top">uuu</td></tr>' +
                '</table>'
            );
            $('.tb').show();
        }
        else
        {                                                                          // ** Added curly braces
            $("#newsletter_types").remove();
            $('.tb').hide();
        }                                                                          // ** Added curly braces
    });

});