How to insert the selected checkbox value into another column?-CodePudding

I am making a cart for my web app where user can select the item that they want in the product table by checking the checkbox, then the checkbox will show the selected item beside the table to show the user what he have selected. Assume the product list have 500 products.

I have wrote a simple jQuery that manage to insert the selected items into "selecteditemlist", but even after I uncheck the checkbox, the product code still stay in the selected list.

Thanks in advance.

$('input[type="checkbox"]').change(function() {
  var itemcode = $(this).closest("tr").find("td:nth-child(2)").text();
  $("#selecteditemlist").append(itemcode);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-10">
    <table>
      <tr>
        <th>No</th>
        <th>Item Code</th>
        <th>Description</th>
        <th>Price</th>
        <th>Selection</th>
      </tr>
      <tr>
        <td>1</td>
        <td>ABC123</td>
        <td>Item1</td>
        <td>$1</td>
        <td><input type="checkbox"></td>
      </tr>
      <tr>
        <td>2</td>
        <td>BCD456</td>
        <td>Item2</td>
        <td>$1</td>
        <td><input type="checkbox"></td>
      </tr>
      <tr>
        <td>3</td>
        <td>NBV345</td>
        <td>Item3</td>
        <td>$1</td>
        <td><input type="checkbox"></td>
      </tr>
      <tr>
        <td>4</td>
        <td>POI345</td>
        <td>Item4</td>
        <td>$1</td>
        <td><input type="checkbox"></td>
      </tr>
    </table>
  </div>
  <div class="col-2">
    <div class="row sticky-top">
      <h5><u>Selected Item</u></h5>
      <div class="border border-danger" id="selecteditemlist">

      </div>
    </div>
  </div>
</div>

CodePudding user response：

By JavaScript you can achieve by doing like in below snippet :

Here main thing to notice is document.getElementById("selecteditemlist").textContent = ""; , which is important as on each subsequent clicks on checkbox leads to more and more addition to present data . By using this you can achieve that only 1 time data is added

var filterCheck = document.getElementsByClassName("prdCheck");
for (let i = 0; i < filterCheck.length; i  ) {      //looped through all wishlist classes so all can be run with single code
    filterCheck[i].addEventListener("click", applyFilter);
}

function applyFilter() {
  var i;
  var filterLabel = document.getElementsByClassName("prdName");
  var filterCheck = document.getElementsByClassName("prdCheck");
  document.getElementById("selecteditemlist").textContent = "";
  for (i = 0; i < filterCheck.length; i  ) {
    if (filterCheck[i].checked == true) {
      var div = document.createElement("SPAN")
      var txt = filterLabel[i].textContent
      var text = document.createTextNode(txt)
      div.appendChild(text)
      document.getElementById("selecteditemlist").appendChild(div);
    } 
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-10">
    <table>
      <tr>
        <th>No</th>
        <th>Item Code</th>
        <th>Description</th>
        <th>Price</th>
        <th>Selection</th>
      </tr>
      <tr>
        <td>1</td>
        <td class="prdName">ABC123</td>
        <td>Item1</td>
        <td>$1</td>
        <td><input type="checkbox" class="prdCheck"></td>
      </tr>
      <tr>
        <td>2</td>
        <td class="prdName">BCD456</td>
        <td>Item2</td>
        <td>$1</td>
        <td><input type="checkbox" class="prdCheck"></td>
      </tr>
      <tr>
        <td>3</td>
        <td class="prdName">NBV345</td>
        <td>Item3</td>
        <td>$1</td>
        <td><input type="checkbox" class="prdCheck"></td>
      </tr>
      <tr>
        <td>4</td>
        <td class="prdName">POI345</td>
        <td>Item4</td>
        <td>$1</td>
        <td><input type="checkbox" class="prdCheck"></td>
      </tr>
    </table>
  </div>
  <div class="col-2">
    <div class="row sticky-top">
      <h5><u>Selected Item</u></h5>
      <div class="border border-danger" id="selecteditemlist">

      </div>
    </div>
  </div>
</div>