HTML/CSS, a checkbox checked make another buttons unchecked - html

Question

enter image description hereI have a toggle button implemented as checkbox element and some buttons, there are all clickable, the problem is: when this toggle button be clicked, the button clicked before will be unclicked.
Here is the html and css file on github:
https://github.com/jokao1030/Test/tree/b121d8ff0b586cdfc34d1f65996aec9c7a73965c
Maybe someone know how is it going? Please give me some advise, thank you !

Answer 1

It is becoming unchecked because you are not using checkboxes, you are using buttons. Buttons are not meant for use like this, they are meant for one time clicks. As soon as you click somewhere else on the page, the button is no longer active which is why your styling no longer applies to it. Instead, use <input type="radio"> or <input type="checkbox">

Answer 2

I think you will want to do more than this, but this should get you started.
Create an array to keep track of the selected cities.
When the slider is clicked, pop off the last element in the array (which removes that city from the array of selected cities), and at the same time remove the "selected" class so that the background coloring is also removed
const selected = [];
document.querySelectorAll('button').forEach((el) => {
el.addEventListener('click', (e) => {
const city = e.target.classList[0];
document.querySelector(`.${city}`).classList.add('selected');
if (!selected.includes(city)) selected.push(city);
console.log(selected);
});
});
document.querySelector('#check').addEventListener('click', () => {
const uncity = selected.pop();
document.querySelector(`.${uncity}`).classList.remove('selected');
console.log(selected);
});
.choicediv, .ein_auspendler{
position:relative;
max-width: 500px;
}
.selected{
background: #d6d8ff;
}
.slider{
position: absolute;
cursor: pointer;
border: 1.5px solid #adb0ff;
border-radius:10px;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ffffff;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
font-weight: bold;
border-radius:6px;
height: 24px;
width: 80px;
left:3px;
bottom: 1px;
top: 4px;
background-color: #d6d8ff;
-webkit-transition: .4s;
transition: .4s;
}
#check:checked + .slider:before {
-webkit-transform: translateX(150px);
-ms-transform: translateX(150px);
transform: translateX(150px);
}
.text {
color: black;
}
.text:after {
position: absolute;
top: 7px;
right: 8px;
content: "Auspendler";
font-size:14px;
}
.text:before {
position: absolute;
top: 7px;
left: 8px;
content: "Einpendler";
font-size:14px;
}
#check + .slider + .text:after {
font-weight:normal;
}
#check + .slider + .text:before {
font-weight:bold;
}
#check:checked + .slider + .text:after {
font-weight:bold;
}
#check:checked + .slider + .text:before {
font-weight:normal;
}
.auswahl_buttons{
position:relative;
right:0px;
top:10px;
width:240px;
height:36px;
}
/* BUTTONS */
button{
background-color: white;
border: 1px solid #D6D8FF;
border-radius: 12px;
}
button:hover{
background: #D6D8FF;
}
button:focus{
background: #D6D8FF;
};
<div class="choicediv">
<h1>Pendlermobilität</h1>
<h2>Berlin - Brandenburg</h2>
<p1>Möchten Sie eingehende oder<br></p1>
<p2>ausgehende Bewegeungen ansehen?<br></p2>
<label class="ein_auspendler">
<input type="checkbox" id="check" unchecked>
<div class="slider"></div>
<div class="text"></div>
</label>
<p3>Von wo soll es losgehen?<br></p3>
<!-- ---------BUTTONS------------->
<div class="container">
<button class ="Berlin">Berlin</button>
<button class ="Barlim">Barlim</button>
<button class="Cottbus">Cottbus</button>
<button class="Dahme-Spreewald">Dahme-Spreewald</button>
<button class="Frankfurt (Oder)">Frankfurt (Oder)</button>
<button class="Havelland">Havelland</button>
<button class="Märkisch-Oderland">Märkisch-Oderland</button>
<button class="Oberhavel">Oberhavel</button>
<button class="Oberspreewald-Lausitz">Oberspreewald-Lausitz</button>
<button class="Oder-Spree">Oder-Spree</button>
<button class="Ostprignitz-Ruppin">Ostprignitz-Ruppin</button>
<button class="Potsdam">Potsdam</button>
<button class="Potsdam-Mittelmark">Potsdam-Mittelmark</button>
<button class="Prignitz">Prignitz</button>
<button class="Spree-Neiße">Spree-Neiße</button>
<button class="Teltow-Fläming">Teltow-Fläming</button>
<button class="Uckermark">Uckermark</button>
</div>