dviramontes/jsbin.imexEHo.css

## jsbin.imexEHo.css
body{
  padding-top: 100px;
  font-size:50px;
}

## jsbin.imexEHo.html
<!DOCTYPE html>
<html>

<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>

  <form method="post" action="/somescript">
  <div class="container">
    <label for="price-1">item 1 ($20)</label>
    <input type="checkbox" id="price-1" value="20">
  </div>
  <div class="container">
    <label for="price-1">item 2 ($10)</label>
    <input type="checkbox" id="price-2" value="10">
  </div>
    <div class="container">
    <label for="price-1">item 2 ($30)</label>
    <input type="checkbox" id="price-3" value="30">
  </div>
    <div class="container">
      <span><em>Your Total : $</em></span>
      <label for="total" id="total">0</label>
    </div>
</form>
</body>
</html>

## jsbin.imexEHo.js
var checked= false;
var values = [];
var total = 0;

// event handler for input checkboxes
$('input[type="checkbox"]').change(function(e){
  var _value = (+$(this).attr('value'));
  var _id = e.target.id;
  var checked = e.target.checked;

 if(checked) values.unshift(_value);
 if(!checked) values.shift(_value);
 callback(values);

});

var callback = function(values){
  if(values.length === 0){
    total = 0;
  }else{
    total = values.reduce(function(a,b){
      return a + b;
    });
  }
  $("#total").html(total);
/*   return total; */
};
	<!DOCTYPE html>
	<html>

	<head>
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
	<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>

	<form method="post" action="/somescript">
	<div class="container">
	<label for="price-1">item 1 ($20)</label>
	<input type="checkbox" id="price-1" value="20">
	</div>
	<div class="container">
	<label for="price-1">item 2 ($10)</label>
	<input type="checkbox" id="price-2" value="10">
	</div>
	<div class="container">
	<label for="price-1">item 2 ($30)</label>
	<input type="checkbox" id="price-3" value="30">
	</div>
	<div class="container">
	<span><em>Your Total : $</em></span>
	<label for="total" id="total">0</label>
	</div>
	</form>
	</body>
	</html>
	var checked= false;
	var values = [];
	var total = 0;

	// event handler for input checkboxes
	$('input[type="checkbox"]').change(function(e){
	var _value = (+$(this).attr('value'));
	var _id = e.target.id;
	var checked = e.target.checked;

	if(checked) values.unshift(_value);
	if(!checked) values.shift(_value);
	callback(values);

	});

	var callback = function(values){
	if(values.length === 0){
	total = 0;
	}else{
	total = values.reduce(function(a,b){
	return a + b;
	});
	}
	$("#total").html(total);
	/* return total; */
	};