JSFiddle - React, Tailwind, and code Playground

by Serg Michael

HTML

<form action="" id="our-form">
  <div>
    <label for="item-1">item 1</label>
    <input type="checkbox" name="item-1" id="item-1" value="10"> 
  </div>
  <div>
    <label for="item-2">item 2</label>
    <input type="checkbox" name="item-2" id="item-2" value="15"> 
  </div>
  <div>
    <label for="item-3">item 3</label>
    <input type="checkbox" name="item-3" id="item-3" value="20"> 
  </div>
  <div>
    <label for="item-4">item 4</label>
    <input type="checkbox" name="item-4" id="item-4" value="25">
  </div>
  <div>
    <label for="item-5">item 5</label>
    <input type="checkbox" name="item-5" id="item-5" value="30"> 
  </div>
</form>
<!--div>
  Checked count: <span id="checked-count">0</span>
</div-->
<!--div>
  Sum is: <span id="checked-sum">0</span>
</div-->
  <div>
    <input type="text" id="total" value=2000>
  </div>
<div>
  Стоимость <span id="price" value=2000>2000</span>руб.
</div>
<!--div>
  Стоимость <span id="price">2000</span>руб.
</div-->
<div>
  <button>Оформить Заказ на сумму <span id="checked-sum">0</span> руб.</button>
</div>

JavaScript

var 
	$form = $("#our-form"),
	price = parseInt(document.getElementById('total').value),
  $allCheckboxes = $("input:checkbox", $form),
  $sumOut = $("#checked-sum");
alert (price);
$form.on('change', function(e){
	var $chekeds = $(':checked', this),
		sum = 0;
	$chekeds.each(function(){
		var val = parseFloat($(this).val());
		if(val){
			sum += val;
		}
	});
	$sumOut.text(sum+price);
}).trigger('change');


//$countOut = $("#checked-count");
/*
$allCheckboxes.change(function() {
	var
  	sum = 0;
    //count = 0;
	$allCheckboxes.each(function(index, el) {
  	var 
    	$el = $(el),
    	val;
  	if ($el.is(":checked")) {
    	//count++;
      val = parseFloat($el.val());
      if (!isNaN(val)) {
      	sum += val;
      }
    }
  });
  $sumOut.text(sum);
  alert (+price);
  //$countOut.text(count);
});
*/