Question

我的左侧div（id = tree）上有复选框列表。每当我单击复选框时，必须将相同的复选框复制到相反的div（id = checkbox-content）。它不应该从左侧删除，并且在复制到相反的div（id = checkbox-content）时不应该有任何重复。任何的想法？请

HTML

<div id="tree">
    <ul>
    <li><input type="checkbox" value="Node 1"><span class="daredevel-tree-label" style="position: relative;">Node 1</span>
    <ul>
    <li><input type="checkbox" value="Node 1.1"><span class="daredevel-tree-label" style="position: relative;">Node 1.1</span></li>
    <li><input type="checkbox" value="Node 1.2"><span class="daredevel-tree-label" style="position: relative;">Node 1.2</span></li>
    <li><input type="checkbox" value="Node 1.3"><span class="daredevel-tree-label" style="position: relative;">Node 1.3</span></li>
    <li><input type="checkbox" value="Node 1.4"><span class="daredevel-tree-label" style="position: relative;">Node 1.4</span></li>
    </ul></li></ul>
    </div>


    <div id="checkbox-content">

    </div>

Jquery的

( function($) {

    $('div#tree input[type="checkbox"]').click(function() {
    // If checked
    var $list = $("div#checkbox-content");

        var $currElem = $(this).clone();
        var $currElemNext = $(this).next().clone();
        var curElemVal = $(this).attr("value");
        var curElemValNext = $(this).next().text();

    if (this.checked) {

        $list.append($currElem);
        $list.append($currElemNext);
    }
    else {
        //hide to the right
        $list.find('input[value="' + curElemVal + '"]').slideUp("fast", function() {
            $(this).remove();

        });

        $list.find('input[value="' + curElemVal + '"] span').slideUp("fast", function() {
            $(this).remove();

        });

    }
});

})( jQuery );

Answer 1

尝试此操作：点击复选框将li（设置数据值）的克隆副本添加到其他div，如果选中复选框，否则删除li匹配data-value

( function($) {

    $('div#tree input[type="checkbox"]').click(function() {
       var value = $(this).val(); 
       if(this.checked)
       {
          var $copiedLi = $(this).parent('li').clone();
          $copiedLi.attr('data-value',value); 
          $('#checkbox-content').append($copiedLi); 
       }
       else
       {
           $('#checkbox-content li').filter(function(){
              return $(this).data('value') == value;
           }).remove();           
       }    
    });

})( jQuery );

<强> JSFiddle Demo

Answer 2

如果你想删除它的标签，只需添加以下行：

$(this).next('span').remove();

这不会产生任何重复

<强> DEMO HERE

单击同一复选框本身时添加和删除复选框

2 个答案: