Jquery store string and put it out elsewhere when checkbox is checked

Question

looking for some help here. I have to create a price check calculator. Two things need to be done:

If checkboxes with different values are checked the overallprice has to be shown somewhere.
I need a summary of all selected items. So i need to put the selected items beneath the overallprice.

I managed to get point 1 to work. But im struggling with point 2. I have no clue how to put the checked items elsewhere.

Heres how far ive got:

$(document).ready(function() {
 $('input[type="checkbox"]').click(function() {
   var total = 0;
   //var item = [];
   var $parent = $(this).closest('ul');
   $parent.find('input:checked').each(function() {
      total += parseInt($(this).val());
      //item.text();
   });
   $parent.find('span[class^=total]').html(total + ' €');

   var overallPrice = 0;
   $('span[class^=total]').each(function() {
     overallPrice += parseInt($(this).html().replace(' €',''));
   });
   $('.overallprice').html(overallPrice)
   //$('.overallprice').append(item);
   });
});

And for better understanding the JSFIDDLE

I'd be grateful for some help. Thanks alot!

Rajaprabhu Aravindasamy · Accepted Answer · 2016-01-07 15:25:04Z

1

Try to use the following code,

What i did here is, Used the next sibling selector + for picking the relevant label element. And fetched its text and map it to an array, then displayed the result.

$('.overallprice').append($("<div>", {
  text: $("[type='checkbox']:checked + label").map(function() {
   return $(this).contents()[0].nodeValue;
  }).get()
}));

DEMO

edited Jan 7, 2016 at 15:25

answered Jan 7, 2016 at 15:18

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

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

Comments

Praveen Kumar Purushothaman · Accepted Answer · 2016-01-07 15:20:52Z

0

You need to loop through the checked boxes and get the label values:

Get the checked check boxes and loop through them.
for each one, get the label's text content that's next and append it.

Code

// get the checked check boxes
$("input:checked").each(function () {
    // for each one, get the label's text content that's next and append it.
    $('.overallprice').append("<br>" + $(this).next("label").text());
});

Fiddle: https://jsfiddle.net/truvrurc/

answered Jan 7, 2016 at 15:20

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Comments

frikinside · Accepted Answer · 2016-01-07 15:26:51Z

0

I provide a similar aproach like the previous questions but making sure you only get the item name and not the price for the sumary.

First, add this to you HTML:

<h4>Sumary:</h4>
<ul id="sumary">
</ul>

Then add this loop at the end of your checkbox click event:

//Sumary
    $("#sumary").html('');
    $('input:checked').each(function(){
      $("#sumary").append("<li>" + $(this).next("label").clone().find("span").remove().end().text() + "</li>");
    });

I fork your jsFiddle with the changes for demo.

answered Jan 7, 2016 at 15:26

frikinside

1,2441 gold badge9 silver badges19 bronze badges

Collectives™ on Stack Overflow

Jquery store string and put it out elsewhere when checkbox is checked

3 Answers 3

DEMO

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related