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