Блог

Главная - Вопросы по программированию - Как вставить выбранное значение флажка в другой столбец?

Как вставить выбранное значение флажка в другой столбец?

#javascript #html #jquery

Вопрос:

Я создаю корзину для своего веб-приложения, в которой пользователь может выбрать нужный ему товар в таблице товаров, установив флажок, затем флажок покажет выбранный товар рядом со таблицей, чтобы показать пользователю, что он выбрал. Предположим, что в списке продуктов более 500 продуктов.

Я написал простой jQuery, который позволяет вставлять выбранные элементы в «selecteditemlist», но даже после того, как я сниму флажок, код продукта все равно останется в выбранном списке.

Заранее спасибо.

 $('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>

Комментарии:

1. «но даже после того, как я сниму флажок, код продукта все равно останется в выбранном списке». — вы написали код только для его добавления , но не для его повторного удаления — так чего же вы ожидали?

Ответ №1:

С помощью JavaScript вы можете добиться этого, выполнив, как показано в приведенном ниже фрагменте :

Здесь главное , что следует отметить document.getElementById("selecteditemlist").textContent = ""; , что важно, так как каждое последующее нажатие на флажок приводит ко все большему и большему добавлению представленных данных . Используя это, вы можете добиться того, чтобы данные добавлялись только 1 раз

 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>
Метки: