JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" value="4">
<input type="checkbox" value="2">
<input type="checkbox" value="1">
<output>0</output>

JavaScript

const inputs = [...document.querySelectorAll('input')];
const output = document.querySelector('output');

inputs.forEach(input => {
	input.addEventListener('change', update);
});

function update () {
   output.textContent = inputs.reduce((sum, input) => {
   		return sum + (input.checked ? Number(input.value) : 0);
   }, 0);
}