|
Сообщение от рони
|
|
добавьте цикл по секциям(классам)
|
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
body {
font-family: monospace;
font-size: .8rem;
}
main {
max-width: 720px;
margin: 0 auto;
}
.calculation {
max-width: 480px;
margin: 0px auto 0px;
display: flex;
flex-direction: column;
}
.total_all {
margin: 10px auto;
font-size: 2rem;
}
.sum label {
display: block;
text-align: right;
margin: 0 auto;
}
.sum {
font-size: 1.2rem;
display: flex;
flex-direction: column;
margin: 5px auto;
}
.all .num {
color: red;
}
</style>
</head>
<body>
<section class="calculation">
<div class="total_all"></div>
<div class="sum">
<label class="all">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
<div class="sum">
<label class="all">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
<div class="sum">
<label class="all">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
<div class="sum">
<label class="all">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
</section>
<section class="calculation">
<div class="total_all"></div>
<div class="sum">
<label class="all">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
<div class="sum">
<label class="all">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
<div class="sum">
<label class="all">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
<div class="sum">
<label class="all">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
</section>
<script>
const digits = n => n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
for(const section of document.querySelectorAll('.calculation')) {
const total = section.querySelector('.total_all');
section.addEventListener('change', function({
target
}) {
let input = target.closest('input');
if (input) {
let all = target.closest('.all input');
if (all) target.closest('.sum').querySelectorAll('.number input').forEach(input => (input.checked = all.checked))
else if (target.checked) target.closest('.sum').querySelector('.all input').checked = true;
else target.closest('.sum').querySelector('.all input').checked = target.closest('.sum').querySelector('.number :checked')
}
let num = 0;
for (const div of section.querySelectorAll('.sum')) {
const checked = div.querySelector('.all input').checked;
let n = [...div.querySelectorAll('.number')].reduce((n, label) => {
let input = label.querySelector('input');
let up = +label.querySelector('.num').textContent.replace(/\s/g, '');
return input.checked ? n + up : n
}
, 0)
div.querySelector('.all .num').textContent = digits(n);
if (checked) num += n
}
total.textContent = digits(num);
})
let event = new Event("change");
section.dispatchEvent(event);}
</script>
</body>
</html>