How to append element if checkbox is checked and remove it if unchecked?

Question

I have a list of order and if element is selected (checked) - it sums the value and shows the text of element that is selected. How to show text of selected elements and remove it when unchecked? Link to code pen.

And the js itself:

$(".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>");

        }
    } 
});

Look at my edit please

chalasr
– chalasr

2016-02-27 12:34:58 +00:00
Commented Feb 27, 2016 at 12:34 — chalasr
– chalasr, Commented Feb 27, 2016 at 12:34

Vivek Pipaliya · Accepted Answer · 2016-02-27 11:58:40Z

1

Just add $('#text').html(''); before append new one because you appending all div again when new checkbox is checked.

Use following code.

$(".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>");

        }
    } 
});

answered Feb 27, 2016 at 11:58

Vivek Pipaliya

4981 gold badge7 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NeedH8 Over a year ago

Yeah. it removes appended... but see the result if any other tab is select (to the left).

chalasr · Accepted Answer · 2016-02-27 12:39:45Z

0

The code given by @VivekPipaliya replace all the previously texts by the last appended.

The following code will works :

$(".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

Update

I finally got it:

$(".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

edited Feb 27, 2016 at 12:39

answered Feb 27, 2016 at 12:09

chalasr

13.2k5 gold badges44 silver badges83 bronze badges

3 Comments

Vivek Pipaliya Over a year ago

Run your code in codepen.io/NeedHate/pen/xVxgYM & then post the answer X-(

chalasr Over a year ago

Yes, thanks I will add it. but yours squash appended elements by replace their text by the last given.

chalasr Over a year ago

@NeedHate please re-try :)

Collectives™ on Stack Overflow

How to append element if checkbox is checked and remove it if unchecked?

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest