使用jquery添加或删除多个检查表项到另一个列表

Add or Remove Multiple checklist items to another list using jquery

本文关键字：检查表 另一个 列表 jquery 添加 删除 使用      更新时间：2023-09-26

我有一个2div与多个复选框和2按钮添加和删除。检查一些项目并单击添加，我想将它们更新到第二个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/

当您想要移动包含复选框的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>

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

还有，你使用了双引号，这会导致语法错误:

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

应该转义字符串中的双引号，或者使用单引号，如下所示:

.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();
        });
    });
});
<<p> JSFiddle演示/strong>
相关文章：