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>
<p>Second List</p>
<ul class='second-list'>
<ul>

我需要：当我检查项目时，它会复制到第二个列表。取消选中时 - 应从第二个列表中删除此项目。 Here您可以找到基本结构

Answer 1

你可以做这样的事情

var $chk = $('.first-list input').change(function() { // bind event handler to checkbox
  $('.second-list').html( // update html of second list
    $chk.filter(':checked') // get all checked checkbox
    .map(function() { // use map to get array of cloned element
      return $(this).parent().clone(); // clone the li
    }).get() // get the cloned element array
  );
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>
<p>Second List</p>
<ul class='second-list'>
  <ul>

根据复选框值从一个列表到另一个列表的项目

1 个答案: