jquery - 如果选中复选框，如何附加元素，如果未选中，如何将其删除？

Question

我有一个顺序列表，如果选择(选中)元素 - 它会计算值并显示所选元素的文本。如何显示所选元素的文本并在未选中时将其删除？ Link to code pen .

和 js 本身:

$(".price-of-package-element").change(function () {
    var count = 0,
        priceElement = $(".price-of-package-element");   
  for (var i = 0; priceElement[i]; ++i) {
        if (priceElement[i].checked) {
            var value = priceElement[i].value,
                title = $(this).next().text();
            count += Number(priceElement[i].value);
            $('#text').append("<div>" + title + "</div>");

        }
    } 
});

Answer 1

只需添加 $('#text').html('');在附加新的复选框时，您会再次附加新的div。

。

使用下面的代码。

$(".price-of-package-element").change(function () {
  var count = 0,
  priceElement = $(".price-of-package-element");   
  $('#text').html('');
  for (var i = 0; priceElement[i]; ++i) {
        if (priceElement[i].checked) {
            var value = priceElement[i].value,
                title = $(this).next().text();
            count += Number(priceElement[i].value);
            $('#text').append("<div>" + title + "</div>");

        }
    } 
});