<main>
<div class="game_console">
Выберите консоль: <br><br>
<div class="align_game">
<input type="radio" name="console" class="radio" id="ps4" value="PS4"><div class="stlradio"></div><div class="name"> <label for="ps4">PS4</label></div>
</div>
<div class="align_game">
<input type="radio" name="console" class="radio" id="xbox" value="X-box"> <div class="stlradio"></div><div class="name"> <label for="xbox">X-box</label></div>
</div>
<div class="align_game">
<input type="radio" name="console" class="radio" id="nindendo" value="Nindendo"><div class="stlradio"></div><div class="name"> <label for="nindendo">Nindendo</label></div>
</div>
</div>
<br>
<div class="out_console"></div><br>
<div class="out_select_game"></div>
<br><br>
<div class="out_game"></div>
<br>
<div class="all_game">
<div class="game_ps">
<label for="game_1">
<div class="align">
<input type="checkbox" class="stlchek box" id="game_1" value="God of War"><div class="stlchek"></div><div class="name"> God of War</div>
</div>
</label>
<label for="game_2">
<div class="align">
<input type="checkbox" class="stlchek box" id="game_2" value="Uncharted 4"> <div class="stlchek"></div><div class="name"> Uncharted 4</div>
</div>
</label>
<label for="game_3">
<div class="align">
<input type="checkbox" class="stlchek box" id="game_3" value="BloodBorne"><div class="stlchek"></div><div class="name"> BloodBorne</div>
</div>
</label>
</div>
<div class="game_xb">
<label for="game_4">
<div class="align">
<input type="checkbox" class="stlchek box" id="game_4" value="Gears 5"><div class="stlchek"></div> <div class="name">Gears 5</div>
</div>
</label>
<label for="game_5">
<div class="align">
<input type="checkbox" class="stlchek box" id="game_5" value="Halo Infinite"><div class="stlchek"></div> <div class="name">Halo Infinite</div>
</div>
</label>
<label for="game_6">
<div class="align">
<input type="checkbox" class="stlchek box" id="game_6" value="Cuphead"><div class="stlchek"></div><div class="name"> Cuphead</div>
</div>
</label>
</div>
<div class="game_nin">
<label for="game_7">
<div class="align">
<input type="checkbox" class="stlchek box" id="game_7" value="Zelda"><div class="stlchek"></div><div class="name"> Zelda</div>
</div>
</label>
<label for="game_8">
<div class="align">
<input type="checkbox" class="stlchek box" id="game_8" value="Yoshi's"><div class="stlchek"></div><div class="name"> Yoshi's</div>
</div>
</label>
<label for="game_9">
<div class="align">
<input type="checkbox" class="stlchek box" id="game_9" value="Mario Odyssey"><div class="stlchek"></div> <div class="name">Mario Odyssey</div>
</div>
</label>
</div>
</div>
</main>
main{
max-width: 720px;
margin: 0 auto;
}
label{
cursor: pointer;
}
label:hover{
color: #03A5D;
}
input[type=radio] {
display: none;
}
input[type=checkbox] {
display: none;
}
.stlradio {
display: inline-block;
border: 1px solid #b2b1b1;
width: 16px;
height: 16px;
position: relative;
vertical-align: middle;
box-sizing: border-box;
margin-right: 4px;
border-radius: 300px;
background-color:#ffffff;
}
.stlradio:before {
content: "";
background: #03A5D7;
width: 8px;
height: 8px;
opacity: 0;
transition: 0.3s;
position: absolute;
top: 3px;
left: 3px;
border-radius: 300px;
}
input:checked + .stlradio:before {
opacity: 1;
}
.stlchek {
display: inline-block;
border: 1px solid #b2b1b1;
width: 16px;
height: 16px;
position: relative;
vertical-align: middle;
box-sizing: border-box;
margin-right: 4px;
}
.stlchek:before {
content: "";
background: #03A5D7;
width: 8px;
height: 8px;
opacity: 0;
transition: 0.3s;
position: absolute;
top: 3px;
left: 3px;
}
input:checked + .stlchek:before {
opacity: 1;
}
.name{
display: inline-block;
}
.name:hover{
color: #03A5D7;
}
.align_game{
display:flex;
align-items: center;
}
.align{
display: inline-flex;
align-items: center;
margin: 0px 5px 0px 5px;
}
.all_game{
position: relative;
}
.game_ps {
position:absolute;
display: none;
}
.game_xb {
position:absolute;
display: none;
}
.game_nin {
position:absolute;
display: none;
}
let radioCheck = document.querySelectorAll(".radio");
let box = document.querySelectorAll(".box");
let outConsol = document.querySelector(".out_console");
let outGame = document.querySelector(".out_game");
let outSelectGame = document.querySelector(".out_select_game");
let gamePs = document.querySelector(".game_ps");
let gameXb = document.querySelector(".game_xb");
let gameNin = document.querySelector(".game_nin");
function checkedShow() {
outConsol.innerHTML = "Ваша консоль: " + this.value;
}
function consl(){
for(let i=0; i<radioCheck.length; i++){
radioCheck[i].addEventListener("change", checkedShow);
}
}
consl();
function selectedRadioButton(){
for(let i=0; i<radioCheck.length; i++){
if(radioCheck[0].checked){
gamePs.style.display = "block";
gameXb.style.display = "none";
gameNin.style.display = "none";
outGame.innerHTML = "Эксклюзивы для PS4"
}
else if(radioCheck[1].checked){
gamePs.style.display = "none";
gameXb.style.display = "block";
gameNin.style.display = "none";
outGame.innerHTML = "Эксклюзивы для X-box"
}
else if(radioCheck[2].checked){
gamePs.style.display = "none";
gameXb.style.display = "none";
gameNin.style.display = "block";
outGame.innerHTML = "Эксклюзивы для Nindendo"
}
}
}
function gameAll(){
for(let i=0; i<radioCheck.length; i++){
radioCheck[i].addEventListener("change", selectedRadioButton);
}
}
gameAll();
Все что мог попробовать не получается реализовать следующее.
Нужно что бы при выборе игры, она выводилась <div class="out_select_game"></div> если их выбрано не одна то они должны идти в строку. И если чек бокс снят то и игра должна исчезнуть из строки.