Question

如果选中复选框，我试图附加和显示方法，问题是这两个方法不能同时工作。它显示div或附加表。我怎么能同时拥有这两个表和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();
    });

});

Answer 1

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

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

......与此相同：

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

......你的意思是：

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

另外，您的代码在运行中创建表时存在问题（您正在添加没有行的单元格）。此外，$(this).is(':checked')是一种非常非常复杂的方法，可以找出是否选中了复选框元素。只需直接使用其checked属性即可。

这是一个快速编辑，更改的线条用**展开（您可能需要向右滚动才能看到它们）。我只是在没有它们的任何细胞周围添加了行;你需要确保他们在正确的地方：

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

});

Answer 2

您的代码中存在拼写错误（ else 之后缺少{}）

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

我怎样才能在jQuery中使用两种不同的方法？

2 个答案: