使用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