Question

我有一个订单列表和if元素被选中（选中） - 它将值相加并显示所选元素的文本。如何显示所选元素的文本并在取消选中时将其删除？ 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('');，然后再添加新的$(".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>"); } } });，因为在选中新复选框时会再次追加所有div。

使用以下代码。

Answer 2

@VivekPipaliya给出的代码替换了最后一个附加的所有先前文本。

以下代码将起作用：

$(".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>"); // Append the div from out of the loop
});

Codepen

<强>更新

我终于明白了：

$(".price-of-package-element").change(function () {
    var priceElement = $(this);
    var id = priceElement.attr('id');
    var title = $(this).next().text();
    var textId = 'text-' + id;

    if ($(this).is(':checked')) {
        $('#text').append("<div id='"+ textId +"'>" + title + "</div>"); // Append the div from out of the loop
    } else {
        $('#'+textId).remove();
    }
});

CodePen

如果选中复选框，如何追加元素，如果未选中则删除它？

2 个答案: