Estoy creando un carrito para mi aplicación web donde el usuario puede seleccionar el artículo que desea en la tabla de productos marcando la casilla de verificación, luego la casilla de verificación mostrará el artículo seleccionado al lado de la tabla para mostrarle al usuario lo que ha seleccionado. Suponga que la lista de productos tiene más de 500 productos.
Escribí un jQuery simple que logra insertar los elementos seleccionados en "selectedititemlist", pero incluso después de desmarcar la casilla de verificación, el código del producto aún permanece en la lista seleccionada.
Gracias por adelantado.
$('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>Con JavaScript , puede lograrlo haciendo lo siguiente:
Aquí lo principal a notar es
document.getElementById("selecteditemlist").textContent = "";, lo cual es importante ya que cada vez que se hace clic en la casilla de verificación, se agregan más y más datos actuales. Al usar esto, puede lograr que solo se agreguen datos 1 vez
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>