Question

我试图实现一些功能当我检查项目时，它会复制到第二个列表一切工作。
我添加了按钮，将所有复选框设置为选中。但是当我点击它时，所有项目都不会复制到第二个列表。你能帮帮我吗？

<p>First List</p>
<ul class='first-list'>
  <li>
    <input type='checkbox' id='ckbx1'><label for='ckbx1'>One</label>
  </li>
  <li>
    <input type='checkbox' id='ckbx2'><label for='ckbx2'>Two</label>
  </li>
  <li>
    <input type='checkbox' id='ckbx3'><label for='ckbx3'>Tree</label>
  </li>
  <li>
    <input type='checkbox' id='ckbx4'><label for='ckbx4'>Four</label>
  </li>
</ul>
 <span class="addAll">Add All</span>
<p>Second List</p>
<ul class='second-list'>
</ul>

和Jquery

var $chk = $('.first-list input').change(function() {
  $('.second-list').html(
    $chk.filter(':checked').map(function() {
      return $(this).parent().clone();
    }).get()
  );
})
$('.addall').click(function() {
    $('.first-list input').prop('checked',true);
})

这是小提琴 - https://jsfiddle.net/gf4xm8pk/3/

非常感谢，对不起我的英语。

Answer 1

您只需要触发更改事件：

$('.addall').click(function() {
    $('.first-list input').prop('checked',true).trigger('change');
})

updated jsFiddle。

当存在用户交互时发生更改事件：例如，单击或键盘事件。当您以编程方式影响项目的状态或值时，附加的事件通常不会自动触发，因此您必须自己强制它。

Answer 2

我的解决方案可能很长但是所有代码 所以试试fiddle

将所有选中的列表项复制到另一个列表

2 个答案: