Сергей Ракипов,
forEach тоже for, но гораздо удобнее.
var index = 0;// номер открытой вкладки с названиями игр
var game = document.querySelectorAll('.all_game > div'); // массив вкладок
function gamesSelectedShow() { //сбор названий игр в открытой вкладке
var nameGames = []; //массив для названий
game[index].querySelectorAll('input').forEach(function(input) { //цикл по всем инпутам в открытой вкладке
if (input.checked) nameGames.push(input.value) // если стоит галочка, сохранияем имя игры в массив имён
})
document.querySelector('.out_select_game').innerHTML = nameGames.length ? nameGames : 'Сделайте выбор!';
// выводим имена если они есть(длина массива не ноль) иначе надпись Сделайте выбор
}
function consoleSelectedShow() {// обходим все вкладки, добавляем, если номер вкладки совпадаем с индексом консоли, или убираем класс open
// этот класс открывает вкладку .all_game > div.open{ display: block;}
game.forEach(function(div, i) {
div.classList.toggle('open', i === index)
})
}
document.querySelectorAll('[name="console"]').forEach(function(console, i) { //обходим все кнопки для выбора консоли
// на кнопку ставим обработчик
console.addEventListener('change', function() {
//если нажали на кнопку, выводим значение этой кнопки
document.querySelector('.out_console').innerHTML = 'Ваша консоль: ' + console.value;
index = i;// меняем индекс для открывания вкладки
consoleSelectedShow(); // открываем вкладку с нужным индексом
gamesSelectedShow(); // смотрим есть ли выбранные названия в открытой вкладке
})
})
game.forEach(function(div) { // ставим обработку на каждую вкладку
div.addEventListener('change', gamesSelectedShow) // если в вкладке был выбор, выводим актуальный список игр
})