选中复选框时，jQuery 复制其他 div 元素

Question

所以我有这个棘手的（至少对我来说）脚本需要编写/修改。您可以在下面看到它现在的样子：

HTML:

<div class="holder" style="float: left; margin-right: 20px">
    <input type=checkbox class="checkbox" checked="checked" />
    <h2>Lorem ipsum</h2>
</div>
<div class="holder" style="float: left; margin-right: 20px">
    <input type=checkbox class="checkbox" checked="checked" />
    <h2>Lorem ipsum</h2>
</div>
<div class="holder" style="float: left; margin-right: 20px">
    <input type=checkbox class="checkbox" checked="checked" />
    <h2>Lorem ipsum</h2>
</div>
<div class="holder" style="float: left; margin-right: 20px; clear: right">
    <input type=checkbox class="checkbox" checked="checked" />
    <h2>Lorem ipsum</h2>
</div>

<div class="number">
    0
</div>

Javascript:

var increment2=1; 
        $('.checkbox').live('click', function() { 
        $('.number').html( '(' + increment2 + ')'); 
        increment2++; 
    })

http://jsfiddle.net/P3zMu/13/

需要做的是，当您选中某个框时，容器的 h2 内容应在 ul 中显示为 li。如果选中了 3 个框，则 ul 中将是 3 li 等...当您取消选中该框时，它当然会从 ul 中删除。

我希望我的解释有意义。有人可以帮忙吗？

Answer 1

我对您的 html 做了一些小的更改并实现了以下代码，

DEMO 这里

var increment2 = 1;

$('.checkbox').on('click', function() {
    $('.number').html('(' + increment2 + ')');
    increment2++;

    var $div = $(this).parent('div').get(0);

    if ($(this).is(':checked')) {        
        $('#selected_items').append('<li selected-item="' + $div.id + '_selected">' + $($div).find('h2').text() + '</li>');
    } else {
        $('#selected_items > li[selected-item^="' + $div.id + '"]').remove();
    }
});

Answer 2

使用clone()方法的东西应该可以工作：

var increment2=1; 
    $('.checkbox').live('click', function() {  
    increment2++; 
    $('.number').append($(this).next().clone());
})

这只会将复选框后的下一个元素（在本例中为h2）附加到.number元素，但你明白了。为了使其正常工作，您需要为每个值输入不同的值而不是 lorem ipsum，然后检查它们是否已经存在/在取消选中时删除它们 - 没有时间写下来。