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>
  Стоимость <span id="price">2000</span>руб.
</div>
<div>
  <button>Оформить Заказ на сумму <span id="checked-sum">0</span> руб.</button>
</div>

JavaScript

var
  $form = $("#our-form"),
  $price = $("#price"),
  //$price = 2000,
  $allCheckboxes = $("input:checkbox", $form),
  $sumOut = $("#checked-sum");
  //$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);
});