复选框被选中，然后仅将其附加到 div 或如果未选中则将其删除答案

【问题标题】：Checkbox is checked then only append it to the div or else remove it if it is unchecked复选框被选中，然后仅将其附加到 div 或如果未选中则将其删除
【发布时间】：2014-05-22 10:29:50
【问题描述】：

请看jsfiddlehttp://jsfiddle.net/6fsf8/

如果复选框被选中，那么我只需要将其附加到 div 中，如果未选中，则我需要将其从 div 中删除。

我已经尝试过了，但它一直在将它附加到 div 中。

if($(this).is(':checked'))
{
    $("#fororders").append($(this).attr('value'));

}

还有可能我应该在将它们附加到 div 时以垂直顺序而不是水平顺序显示它们。

您需要展开所有 Accordians 才能看到复选框。请告诉我如何解决这个问题

【问题讨论】：

@MilindAnantwar no.. 只是展开所有这些手风琴..
抱歉问题不完整，您需要展开所有 Accordians 才能看到复选框。
但默认情况下不会选中它们。你是从某个地方设置它们的吗

标签： jquery

【解决方案1】：

您的元素是附加的，因为您没有删除它。

尝试类似：

if($(this).is(':checked'))
{

    $("#fororders").append('<div id="something">'+$(this).attr('value')+'</div>');

}else{
    $('#something').remove();
}

要垂直显示您的元素，请添加 css 属性 display:block; 这是一些基本的 CSS，你不应该在这里问这个。

【讨论】：

您的解决方案看起来不错，非常感谢您，是否可以将最新检查的内容推送到 div 顶部？现在他们正在结束。
是的，使用 prepend() 而不是 append() ;) 但是如果你不将它添加到容器中，它们将被放置在你的手风琴之前
如果复选框被选中，是否可以用该值代替文本获得 CheckBox
是的，如果我明白你需要什么，请替换 $("#fororders").append('
'+$(this).attr('value') +'
'); with var checkbox = $(''); $("#fororders").prepend(checkbox);
我需要带有所选值的复选框并且在不同的行中。当我尝试使用您的代码时，它只显示一个空复选框。

【解决方案2】：

你可以这样做：

if(this.checked)
{
    $("#fororders").append($(this).attr('value'));

}

您可以使用 change 事件来代替点击：

$(document).on("change", ":checkbox", function (e) {

if(this.checked)
{
    $("#fororders").append($(this).attr('value'));

}


});

UPDATED FIDDLE

【讨论】：

【解决方案3】：

您必须从 #fororders div 中删除该项目。看看这个fiddle

【讨论】：

【解决方案4】：

您需要将文本包装在一个元素中，然后附加它。这将使您更容易通过id 定位它，以便以后能够将其删除：

演示：http://jsfiddle.net/abhitalks/6fsf8/3/

$(document).on("click", ":checkbox", function (e) {
    var v = $(this).val(); // cache the value
    if ($(this).is(':checked')) {
        // create a span with the same id as value and append it
        $("#fororders").append( $("<span>").attr("id", v).text(v) );
    } else {
        // target the span with the same id as value and remove it
        $("#fororders").find("span#" + v).remove();
    }

});

【讨论】：