Прибавить значения отмеченных чекбоксов к сумме
Приветствую! Прошу помочь со следующей задачей: Есть вот такая "конструкция" (код ниже). Необходимо к числу 100 500 (оно может быть разным) добавить числа из значений отмеченных чекбоксов. При этом, если снять галочку с чекбокса, то его значение должно вычитаться из этой суммы.
Заранее спасибо! <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> |
сумма выбранных опций
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>
|
<div class="Sum">
<div class="checkbox_item">
<label>Опция 1 <input type="checkbox" class="dopopt" value="500" checked/></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>
<script>
(() => {
const checkboxes = [].slice.call(
document.querySelectorAll('.Sum .checkbox_item input[type="checkbox"]')
);
const resultContainer = document.querySelector('#fullsum');
if (!resultContainer) {
return;
}
checkboxes.forEach(node => {
const initialValue = +resultContainer.textContent.replace(/\D+/gim, '');
node.addEventListener('change', () => {
const sum = checkboxes.reduce((res, node) => {
return res + (node.checked ? +node.value : 0);
}, initialValue);
resultContainer.textContent = sum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
});
});
checkboxes.at(-1)?.dispatchEvent(new Event('change'));
})();
</script>
|
Огромное Вам СПАСИБО!
|
| Часовой пояс GMT +3, время: 14:35. |