CODEWITHSUNDEEP
jqueryhtmlcheckbox
Hlushenok
Hlushenok

Reputation: 51

Item from one list to another based on the checkbox value

I have some problem and I have no idea how solve it. I have two list. In first - items with checkbox and label

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

I need: When I checked item, it copy to second list. When unchecked - this item should be removed from second list. Here you can find the basic structure

Upvotes: 0

Views: 52

Answers (1)

Pranav C Balan
Pranav C Balan

Reputation: 115242

You can do something like this

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>

Upvotes: 3

Related Questions