Управляйте отображением Div с несколькими флажками ⇐ Html

[Anonymous]

У меня есть div, а ниже некоторые флажки.
Div имеет скрытую видимость.
Первые проверки флажков и скидки, а другие виден.




test-page

body {
height: 100vh;
background-image: linear-gradient(to bottom right, #3fe1ff, #0047bf, #1b0055);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;}

.mydiv {
width: 100%;
height: 100px;
background-color: #3fe1ff;
margin-bottom: 2em;}

.main-checkbox {
padding: 0.5em 1em;
margin-bottom: 0.5em;
border-bottom: 1px solid white;}

.hide {
visibility: hidden;}

















const checkBoxes = document.querySelectorAll(".check-boxes");
const checkAll = document.querySelector("#checkAll");
const myDiv = document.querySelector("#myDiv");
for (let i = 0; i < checkBoxes.length; i++) {
checkAll.addEventListener("change", () => {
checkBoxes.checked = checkAll.checked;
if (checkAll.checked) {
myDiv.classList.remove("hide");
} else {
myDiv.classList.add("hide");
}
});
checkBoxes.addEventListener("change", () => {
if (checkBoxes.checked) {
myDiv.classList.remove("hide");
} else {
myDiv.classList.add("hide");
checkAll.checked = false;
}
});
}





Подробнее здесь: https://stackoverflow.com/questions/796 ... checkboxes