Вот отмечание чек боксов работает так как нужно, но там ошибка и я ее не понимаю
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
body {
background-color: #27405C;
font-size: 15px;
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
}
label{
display: flex;
align-items: center;
justify-content: space-between;
}
.calculator {
max-width: 110px;
margin: 0px auto 0px;
display: flex;
flex-direction: column;
}
.total_amount {
max-width: 220px;
margin: 20px auto 20px;
color: #946FF2;
}
.level_one {
color: #2189FF;
padding: 10px 0px 10px 10px;
margin: 0px 0px 10px 0px;
border-left: solid 1px #2189FF;
}
.sum_all_level_one {
padding: 0px 0px 2px 0px;
}
.num_level_one {}
.level_two {
color: #1D76DB;
display: flex;
flex-direction: column;
padding: 0px 0px 0px 10px;
border-left: solid 1px #1D76DB;
}
.num_level_two {}
.level_three {
color: #619DE1;
display: flex;
flex-direction: column;
padding: 0px 0px 0px 10px;
border-left: solid 1px #619DE1;
}
</style>
</head>
<body>
<div class="total_amount">
21 000
</div>
<div class="calculator">
<div class="level_one">
<label class="all__1 sum_all_level_one">
<span class="num_level_one">
8 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__1">
</label>
<div class="level_two">
<label class="number">
<span class="num_level_two">
3 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__2">
</label>
<label class="number">
<span class="num_level_two">
5 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__2">
</label>
</div>
</div>
<div class="level_one">
<label class="all__1 sum_all_level_one">
<span class="num_level_one">
13 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__1">
</label>
<div class="level_two">
<label class="number">
<span class="num_level_two">
4 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__2">
</label>
</div>
<div class="level_two">
<label class="all__2 number">
<span class="num_level_two sum_all_level_two">
9 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__2">
</label>
<div class="level_three">
<label class="number">
<span class="num_level_three">
1 500
</span>
<input type="checkbox" checked="checked" class="checkbox level__3">
</label>
<label class="number">
<span class="num_level_three">
7 500
</span>
<input type="checkbox" checked="checked" class="checkbox level__3">
</label>
</div>
</div>
</div>
</div>
<script>
const totalAmount = document.querySelector('.total_amount');
const calculator = document.querySelector('.calculator');
const levelOne = document.querySelector('.level_one');
const levelTwo = document.querySelector('.level_two');
const levelThree = document.querySelector('.level_three');
calculator.addEventListener('change', function ({
target
}) {
let input = target.closest('input');
console.log(input)
if (input) {
let all__1 = target.closest('.all__1 input');
if (all__1) target.closest('.level_one').querySelectorAll('.number input').forEach(input => (input.checked = all__1.checked));
else if (target.checked) target.closest('.level_one').querySelector('.all__1 input').checked = true;
else target.closest('.level_one').querySelector('.all__1 input').checked = target.closest('.level_one').querySelectorAll('.number :checked');
}
if (input) {
let all__2 = target.closest('.all__2 input');
if (all__2) target.closest('.level_two').querySelectorAll('.number input').forEach(input => (input.checked = all__2.checked));
else if (target.checked) target.closest('.level_two').querySelector('.all__2 input').checked = true;
else target.closest('.level_two').querySelector('.all__2 input').checked = target.closest('.level_two').querySelectorAll('.number :checked');
}
if(target.classList.contains("level__1")){
console.log("Click: level_1");
let levelOneChildren = target.closest('.level_one').querySelectorAll(".level_two .num_level_two")
console.log(levelOneChildren);
}
if(target.classList.contains("level__2")){
console.log("Click: level_2");
let levelTwoChildren = target.closest('.level_two').querySelectorAll(".level_three .num_level_three")
console.log(levelTwoChildren);
}
})
</script>
</body>
</html>