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

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，否则删除匹配 [=13] 的 li =]

( 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

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

Checkbox addition and deletion on clicking same checkbox itself

html

javascript

checkbox

jquery