Simple addition. Three individual columns

JavaScript
1

I have three price columns for add-ons. It is interactive; the user can click each add-on to see the price update for that specific column.

The problem I’m facing is that the jQuery I have is updating all columns (adding all the values in each column). The default price (the product) is the same for all.

Here’s the HTML (it isn’t a live site)

<article><!-- COLUMN 1 -->
		<div class="price" id="price-1">
			<label class="default-price">
				<input type="checkbox" checked rel="2000">
				Default
			</label>
			<label>
				<input type="checkbox" rel="100">
				Addon 1 $100
			</label>
			<label>
				<input type="checkbox" rel="200">
				Addon 2 $200
			</label>
			<div class="updated-price">
				<sup>$</sup><span id="" class="output output-price">2000</span>
			</div>
		</div>
	</article>
	<article><!-- COLUMN 2 -->
		<div class="price" id="price-1">
			<label class="default-price">
				<input type="checkbox" checked rel="2000">
				Default
			</label>
			<label>
				<input type="checkbox" rel="300">
				Addon 1 $300
			</label>
			<label>
				<input type="checkbox" rel="400">
				Addon 2 $400
			</label>
			<div class="updated-price">
				<sup>$</sup><span id="" class="output output-price">2000</span>
			</div>
		</div>
	</article>
	<article><!-- COLUMN 1 -->
		<div class="price" id="price-1">
			<label class="default-price">
				<input type="checkbox" checked rel="2000">
				Default
			</label>
			<label>
				<input type="checkbox" rel="500">
				Addon 1 $500
			</label>
			<label>
				<input type="checkbox" rel="600">
				Addon 2 $600
			</label>
			<div class="updated-price">
				<sup>$</sup><span id="" class="output output-price">2000</span>
			</div>
		</div>
	</article>

Here’s the jQuery

$("input[type=checkbox]").change(function(){
	recalculate();
});
function recalculate(){
    var sum = 0.00;
    $("input[type=checkbox]:checked").each(function(){
      sum += parseInt($(this).attr("rel"));
    });
    $(".output").html(sum);
}

How do I get the math to operate individually for each column? Thanks!

2

As the JS experts are probably away counting their money I’ll have my usual amateurish stab at this :slight_smile:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.price {
	background:#fff;
	transition:1s ease;
}
.calculating, .calculating .updated-price {
	background:red;
	color:#fff;
	transition:1s ease;
}
.updated-price {
	font-weight:bold;
	margin:0 0 1em;
	background:#f9f9f9;
	padding:5px;
}
</style>
</head>

<body>
<article><!-- COLUMN 1 -->
  <div class="price">
    <label class="default-price">
      <input type="checkbox" checked rel="2000">
      Default </label>
    <label>
      <input type="checkbox" rel="100">
      Addon 1 $100 </label>
    <label>
      <input type="checkbox" rel="200">
      Addon 2 $200 </label>
    <div class="updated-price"> <sup>$</sup><span id="" class="output output-price">2000</span> </div>
  </div>
</article>
<article><!-- COLUMN 2 -->
  <div class="price">
    <label class="default-price">
      <input type="checkbox" checked rel="2000">
      Default </label>
    <label>
      <input type="checkbox" rel="300">
      Addon 1 $300 </label>
    <label>
      <input type="checkbox" rel="400">
      Addon 2 $400 </label>
    <div class="updated-price"> <sup>$</sup><span id="" class="output output-price">2000</span> </div>
  </div>
</article>
<article><!-- COLUMN 1 -->
  <div class="price" >
    <label class="default-price">
      <input type="checkbox" checked rel="2000">
      Default </label>
    <label>
      <input type="checkbox" rel="500">
      Addon 1 $500 </label>
    <label>
      <input type="checkbox" rel="600">
      Addon 2 $600 </label>
    <div class="updated-price"> <sup>$</sup><span id="" class="output output-price">2000</span> </div>
  </div>
</article>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
$("input[type=checkbox]").change(function() {
    $('.price').removeClass('calculating');
    recalculate($(this));
});

function recalculate(target) {
    var sum = 0.00;
    var thisRow = target.closest('.price').addClass('calculating');
    $(".calculating input[type=checkbox]:checked").each(function() {
        sum += parseInt($(this).attr("rel"));
    });
    $(".calculating .output").html(sum);
}
</script>
</body>
</html>

It’s probably not the best way to do it but seems to work. :wink:

(Be careful with your ids as they are unique and you can only have the same id once on the page.)

3

Works for me. I just copied and pasted to test quickly. I’ll read through your JS to see what you did and learn.

Thanks!

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.