如何在jQuery中使用两种不同的方法？

如果选中复选框，我尝试使用append和show方法，问题是这两种方法不能同时工作。它显示div或append表。如果选中复选框，我如何同时使用table和div

代码如下：

<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();
    });

}); 

年龄
你的img在这里
$（函数（）{
$（“输入[name=want\u nl]”）。单击（函数（）{
如果（$（this）.is（“：checked”））
{
$（“#时事通讯”）。附加（“”）；
$（“#时事通讯类型”）。追加（“Optioneel”）；
$（“#时事通讯类型”）.append（'Zoet-houdertje Chocolade lollys'）；
$（“#时事通讯"类型”）.append（'15 stuks a&euro；22,50'）；
$（'uuu-types'）。追加（'uuu'）；
$（'.tb'）.show（）；
}
其他的
$（“#时事通讯_类型”）.remove（）；
$（'.tb'）.hide（）；
});
}); 

显示/隐藏问题是缺少一对花括号。你有这个：

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

。。。与此相同：

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

…你的意思是：

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

另外，动态创建表的代码也有问题（添加的单元格没有行）。另外，

$（this）.is（“：checked”）

是一种非常复杂的方法，可以确定是否选中了复选框元素。直接使用它的

checked

属性即可

这里有一个快速编辑，更改了带有**标记的行（您可能需要向右滚动才能看到它们）。我只是在没有行的单元格周围添加行；您需要确保它们位于正确的位置：

$（“输入[name=want\u nl]”）。单击（函数（）{
如果（this.checked）/**简化的'checked'检查
{
//**在下面，只做*一个*附加
$（“#时事通讯”）。附加(
'' +
“Optioneel”+
“Zoet houdertje巧克力棒棒糖”+/**添加了“tr”`
“15英镑一欧元；22.50欧元”+/**增加了“tr”`
“uuu”+
''
);
$（'.tb'）.show（）；
}
其他的
{//**添加了花括号
$（“#时事通讯_类型”）.remove（）；
$（'.tb'）.hide（）；
}//**增加了花括号
});
}); 

您的代码中有一个输入错误（在else之后缺少{}）

$（函数（）{
$（“输入[name=want\u nl]”）。单击（函数（）{
如果（$（this）.is（“：checked”））{
$（“#时事通讯”）。附加（“”）；
$（“#时事通讯类型”）。追加（“Optioneel”）；
$（“#时事通讯类型”）.append（'Zoet-houdertje Chocolade lollys'）；
$（“#时事通讯"类型”）.append（'15 stuks a&euro；22,50'）；
$（'uuu-types'）。追加（'uuu'）；
$（'.tb'）.show（）；
}
否则{//在这里
$（“#时事通讯_类型”）.remove（）；
$（'.tb'）.hide（）；
}//这里呢
});
}); 

$("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
    });

}); 

$(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 { //here
        $("#newsletter_types").remove();
        $('.tb').hide();
    } //and here
  });
});