使用jquery添加或删除多个清单项目到另一个列表

Question

我有一个2格与多个复选框和2个按钮添加和删除。 检查一些项目，然后单击添加我想将它们更新到2nd div，无需重复值和相同的删除过程。

我试图做到这一点，但无法做到正确。 我试过如下

$(document).ready(function() { 
    $('#btn-add').click(function(){ 
    $('input[type="checkbox"]:checked').each(function() { 
      $('.chk-container-Add').append("<li><input class="checkbox2" type="checkbox" value='"+$(this).val()+"'>"+$(this).text()+"</li>"); 
      $(this).remove(); 
// Has to be added in div2 and removed from div1 
}); 
    }); 

    $('#btn-remove').click(function(){ 
     //Has to remove from div2 and to be added in div1 
    }); 

}); 

这里是我的小提琴演示

http://jsfiddle.net/M_Sabya/xuktz0j7/3/

Answer 1

当您想要移动包含它们的li项目时，您正尝试单独移动复选框 - 或者重新创建它们。

$('#btn-add').click(function() { 
 
    $('.chk-container input[type="checkbox"]:checked').each(function() { 
 
    $(this). 
 
     prop('checked', false). 
 
     closest('li').appendTo($('.chk-container-Add')); 
 
    }); 
 
}); 
 

 
$('#btn-remove').click(function() { 
 
    $('.chk-container-Add input[type="checkbox"]:checked').each(function() { 
 
    $(this). 
 
     // uncheck as we move 
 
     prop('checked', false). 
 
     // find the parent <li> 
 
     // append to the other container 
 
     // no need to remove 
 
     closest('li').appendTo($('.chk-container')); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="div1"> 
 
    <ul class="chk-container"> 
 
    <li> 
 
     <input class="ck1" type="checkbox" value="item1">Item 1</li> 
 
    <li> 
 
     <input class="ck1" type="checkbox" value="item2">Item 2</li> 
 
    <li> 
 
     <input class="ck1" type="checkbox" value="item3">Item 3</li> 
 
    <li> 
 
     <input class="ck1" type="checkbox" value="item4">Item 4</li> 
 
    <li> 
 
     <input class="ck1" type="checkbox" value="item5">Item 5</li> 
 
    <li> 
 
     <input class="ck1" type="checkbox" value="item6">Item 6</li> 
 
    </ul> 
 
</div> 
 
<button id="btn-add">Add &raquo;</button> 
 
<button id="btn-remove">&laquo; Remove</button> 
 
<div id="div2"> 
 
    <ul class="chk-container-Add"> 
 
    <li> 
 
     <input class="ck1" type="checkbox" value="item7">Item 7</li> 
 
    <li> 
 
     <input class="ck1" type="checkbox" value="item8">Item 8</li> 
 
    </ul> 
 
</div>

Answer 2

你应该使用.parent()，因为$(this)是复选框本身。

而且，你已经使用双引号，让你的语法错误：

.append("<li><input class="checkbox2" type="checkbox" ... 

你应该逃脱双引号中的字符串，或者按照下面使用单引号：

---

$(document).ready(function() { 
    $('#btn-add').click(function(){ 
     $('#div1 input[type="checkbox"]:checked').each(function() { 
      $('.chk-container-Add').append("<li><input class='checkbox2' type='checkbox' value='"+$(this).val()+"'>"+$(this).parent().text()+"</li>"); 
      $(this).parent().remove(); 
     }); 
    }); 

    // it's basicaly the same as the above, except of the container, which is "div2" 

    $('#btn-remove').click(function(){ 
     $('#div2 input[type="checkbox"]:checked').each(function() { 
      $('.chk-container').append("<li><input class='checkbox2' type='checkbox' value='"+$(this).val()+"'>"+$(this).parent().text()+"</li>"); 
      $(this).parent().remove(); 
     }); 
    }); 

}); 

JSFiddle demo