Question

我有一个2 div，带有多个复选框和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/

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" ...

您应该在字符串中转义双引号，或使用单引号，如下所示：

.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

使用jquery在另一个列表中添加或删除多个核对表项

2 个答案: