如何將選中的復選框數值插入另一列？

我正在為我的網路應用程式制作一個購物車，用戶可以通過勾選復選框在產品表中選擇他們想要的專案，然后復選框將在表格旁邊顯示所選專案，以顯示用戶所選的專案。假設產品串列中有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>/span>
<div class="row">/span>
  <div class="col-10"> 
    <table> 
      <tr> 
        <th>No</th>
        <th>Item Code</th>
        <th>Description</th>
        <th> 價格</th>
        <th>/span>Selection</th>
      </tr>/span>
      <tr>/span>
        <td>1</td>/span>
        <td>/span>ABC123</td>/span>
        <td>/span>Item1</td>/span>
        <td>/span>$1</td>/span>
        <td>< input type="checkbox"></td>>
      </tr>/span>
      <tr>/span>
        <td>/span>2</td>/span>
        <td>/span>BCD456</td>/span>
        <td>/span>Item2</td>/span>
        <td>/span>$1</td>/span>
        <td>< input type="checkbox"></td>>
      </tr>/span>
      <tr>/span>
        <td>/span>3</td>/span>
        <td>/span>NBV345</td>/span>
        <td>/span>Item3</td>/span>
        <td>/span>$1</td>/span>
        <td>< input type="checkbox"></td>>
      </tr>/span>
      <tr>/span>
        <td>/span>4</td>/span>
        <td>/span>POI345</td>/span>
        <td>/span>Item4</td>/span>
        <td>/span>$1</td>/span>
        <td>< input type="checkbox"></td>>
      </tr>/span>
    </table>/span>
  </div> 
  <div class="col-2"> 
    <div class="row sticky-top">/span>
      <h5><u> 所選專案</u></h5> 
      < div class="border border-danger" id="selecteditemlist">

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

uj5u.com熱心網友回復：

通過JavaScript，你可以像下面的片段一樣實作：

這里需要注意的是document.getElementById("selecteditemlist").textContent = "";，這很重要，因為在以后每次點擊復選框都會導致越來越多的資料被添加。通過使用這一點，你可以實作只有一次資料被添加

。

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"/span>)
      var txt = filterLabel[i].textContent[/span]。
      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>/span>
<div class="row">/span>
  <div class="col-10"> 
    <table> 
      <tr> 
        <th>No</th>
        <th>Item Code</th>
        <th>Description</th>
        <th> 價格</th>
        <th>/span>Selection</th>
      </tr>/span>
      <tr>/span>
        <td>1</td>/span>
        <td class="prdName"/span>> ABC123</td>>
        <td>/span>Item1</td>/span>
        <td>/span>$1</td>/span>
        <td>< input type="checkbox" class="prdCheck"> </td>>
      </tr>/span>
      <tr>/span>
        <td>/span>2</td>/span>
        <td class="prdName"> BCD456</td>
        <td>/span>Item2</td>/span>
        <td>/span>$1</td>/span>
        <td>< input type="checkbox" class="prdCheck"> </td>>
      </tr>/span>
      <tr>/span>
        <td>/span>3</td>/span>
        <td class="prdName"> NBV345</td>
        <td>/span>Item3</td>/span>
        <td>/span>$1</td>/span>
        <td>< input type="checkbox" class="prdCheck"> </td>>
      </tr>/span>
      <tr>/span>
        <td>/span>4</td>/span>
        <td class="prdName"/span>> POI345</td>
        <td>/span>Item4</td>/span>
        <td>/span>$1</td>/span>
        <td>< input type="checkbox" class="prdCheck"> </td>>
      </tr>/span>
    </table>/span>
  </div> 
  <div class="col-2"> 
    <div class="row sticky-top">/span>
      <h5><u> 所選專案</u></h5> 
      < div class="border border-danger" id="selecteditemlist">

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

標籤：

上一篇：懸停在topnav上不能正常作業（CSS）。

下一篇：如何根據第一次選擇時選擇的選項來隱藏選擇選項