samdo,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
let fullsums = document.querySelectorAll('.rezult');
function StrToNum(str) {
return Number(str.replace(/\D/g, ""))
}
function numSplit(el, num) {
el.textContent = num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
}
document.querySelectorAll('.Sum').forEach(
(sum, i) => {
let rezult = fullsums[i];
let num = StrToNum(rezult.textContent);
sum.querySelectorAll('[checked].dopopt').forEach(({
value
}) => num += +value);
numSplit(rezult, num)
sum.addEventListener('change', function(event) {
let input = event.target.closest('.dopopt');
if (input) {
let dop = -input.value;
if (input.checked) dop = +input.value;
num += dop;
numSplit(rezult, num);
}
}
)
})
})
</script>
</head>
<body>
<div class="Sum">
<div class="checkbox_item">
<label>Опция 1 <input type="checkbox" class="dopopt" value="500" ></label>
</div>
<div class="checkbox_item">
<label>Опция 2<input type="checkbox" class="dopopt" value="100200"></label>
</div>
</div>
<span id="fullsum" class="rezult">100 500</span>
<div class="Sum">
<div class="checkbox_item">
<label>Опция 1 <input type="checkbox" class="dopopt" value="500" checked="checked" ></label>
</div>
<div class="checkbox_item">
<label>Опция 2<input type="checkbox" class="dopopt" value="100" checked="checked" ></label>
</div>
</div>
<span id="fullsum" class="rezult">500</span>
</body>
</html>
