JSFiddle - React, Tailwind, and code Playground

by alantoo

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>

JavaScript

var
	$form = $("#our-form"),
  $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);
  $countOut.text(count);
});