Выбор по селектору CSS: Тренажер JavaScript: Покоряем HTML DOM

Выбор элемента по ID

Задание: найдите элемент с идентификатором 'main-title' и измените его текст на 'Заголовок изменен'. Используйте для этого метод querySelector и подходящий CSS-селектор.

HTML

Восстановить HTML

                      <div class="container">
  <h1 id="main-title">Исходный заголовок</h1>
  <p>Какой-то текст под заголовком</p>
</div>

<div class="container">
  <h1 id="main-title">Исходный заголовок</h1>
  <p>Какой-то текст под заголовком</p>
</div>

JavaScript

// Выберите элемент с id 'main-title' и измените его текст
let titleElement = document.input__1('#main-title');
titleElement.input__2 = "Заголовок изменен";

                     // Выберите элемент с id 'main-title' и измените его текст
let titleElement = document.input__1('#main-title');
titleElement.input__2 = "Заголовок изменен";

Для выбора элемента по ID в CSS-селекторе используется символ решетки (#) перед именем идентификатора. Например: '#main-title'. После выбора элемента, для изменения его текстового содержимого используйте свойство textContent.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Выбор элемента по классу

Задание: найдите элемент с классом 'highlight' и измените его цвет фона на желтый. Используйте метод querySelector и соответствующий CSS-селектор.

HTML

Восстановить HTML

                      <div class="container">
  <p>Обычный параграф</p>
  <p class="highlight">Этот параграф нужно выделить</p>
  <p>Еще один обычный параграф</p>
</div>

<div class="container">
  <p>Обычный параграф</p>
  <p class="highlight">Этот параграф нужно выделить</p>
  <p>Еще один обычный параграф</p>
</div>

JavaScript

// Выберите элемент с классом 'highlight' и измените его фон
let highlightedElement = document.input__1('.highlight');
highlightedElement.style.input__2 = "input__3";

                     // Выберите элемент с классом 'highlight' и измените его фон
let highlightedElement = document.input__1('.highlight');
highlightedElement.style.input__2 = "input__3";

Для выбора элемента по классу в CSS-селекторе используется точка (.) перед именем класса. Например: '.highlight'. После выбора элемента, для изменения цвета фона используйте свойство style.backgroundColor.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Выбор элемента по тегу

Задание: найдите первый элемент h2 на странице и добавьте к его тексту ' (изменено)'. Используйте метод querySelector и селектор по имени тега.

HTML

Восстановить HTML

                      <div class="content">
  <h1>Главный заголовок</h1>
  <h2>Подзаголовок 1</h2>
  <p>Текст первого раздела</p>
  <h2>Подзаголовок 2</h2>
  <p>Текст второго раздела</p>
</div>

<div class="content">
  <h1>Главный заголовок</h1>
  <h2>Подзаголовок 1</h2>
  <p>Текст первого раздела</p>
  <h2>Подзаголовок 2</h2>
  <p>Текст второго раздела</p>
</div>

JavaScript

// Выберите первый h2 и добавьте к его тексту ' (изменено)'
let subheading = document.input__1('input__2');
subheading.textContent = subheading.input__3 + " (изменено)";

                     // Выберите первый h2 и добавьте к его тексту ' (изменено)'
let subheading = document.input__1('input__2');
subheading.textContent = subheading.input__3 + " (изменено)";

Для выбора элемента по имени тега в CSS-селекторе просто указывается имя тега без дополнительных символов. Например: 'h2'. После выбора элемента можно получить его текущий текст через textContent, добавить к нему строку и установить обратно.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Выбор нескольких элементов

Задание: найдите все параграфы на странице и добавьте к ним класс 'highlighted'. Используйте метод для выбора всех элементов, соответствующих селектору, и цикл для обработки коллекции элементов.

CSS

.highlighted {
  background-color: yellow;
  font-weight: bold;
}

HTML

Восстановить HTML

                      <div class="article">
  <h2>Статья</h2>
  <p>Первый параграф статьи.</p>
  <p>Второй параграф с важной информацией.</p>
  <p>Третий заключительный параграф.</p>
  <div>Это не параграф, а div</div>
</div>

<div class="article">
  <h2>Статья</h2>
  <p>Первый параграф статьи.</p>
  <p>Второй параграф с важной информацией.</p>
  <p>Третий заключительный параграф.</p>
  <div>Это не параграф, а div</div>
</div>

JavaScript

// Выберите все параграфы и добавьте им класс 'highlighted'
let paragraphs = document.input__1('input__2');

paragraphs.input__3((paragraph) => {
  paragraph.input__4.input__5('highlighted');
});

                     // Выберите все параграфы и добавьте им класс 'highlighted'
let paragraphs = document.input__1('input__2');

paragraphs.input__3((paragraph) => {
  paragraph.input__4.input__5('highlighted');
});

Для выбора всех элементов, соответствующих селектору, используйте метод querySelectorAll. Он возвращает коллекцию элементов, которую можно обойти при помощи цикла for или forEach. Для добавления класса к элементу используйте метод classList.add().

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Вложенные селекторы

Задание: найдите все ссылки, находящиеся внутри элемента с классом 'navigation', и измените их цвет на красный. Используйте комбинированный CSS-селектор и querySelectorAll.

HTML

Восстановить HTML

                      <nav class="navigation">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Услуги</a></li>
  </ul>
</nav>
<div class="content">
  <p>Текст с <a href="#">ссылкой</a>, которая не должна быть затронута.</p>
</div>

<nav class="navigation">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Услуги</a></li>
  </ul>
</nav>
<div class="content">
  <p>Текст с <a href="#">ссылкой</a>, которая не должна быть затронута.</p>
</div>

JavaScript

// Выберите все ссылки внутри элемента .navigation и измените их цвет
let navLinks = document.querySelectorAll('input__1');

navLinks.input__2((link) => {
  link.input__3.input__4 = "input__5";
});

                     // Выберите все ссылки внутри элемента .navigation и измените их цвет
let navLinks = document.querySelectorAll('input__1');

navLinks.input__2((link) => {
  link.input__3.input__4 = "input__5";
});

Для выбора элементов, находящихся внутри другого элемента, используйте комбинированный селектор с пробелом. Например: '.navigation a' выберет все ссылки внутри элемента с классом 'navigation'. После выбора элементов используйте цикл и свойство style.color для изменения цвета.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Селектор по атрибуту

Задание: найдите все изображения с атрибутом alt и выведите значение этого атрибута в консоль. Используйте селектор по атрибуту и метод querySelectorAll.

HTML

Восстановить HTML

                      <div class="gallery">
  <img src="https://naytikurs.ru/assets/uploads/2025/01/java-1-700x525.png" alt="Java логотип">
  <img src="https://naytikurs.ru/assets/uploads/2025/02/mashinnoe-obuchenie-dlya-nachinayushhih-700x700.png" alt="Машинное обучение">
  <img src="https://naytikurs.ru/assets/uploads/2025/02/dengi-slava-i-kod-gid-po-samym-goryachim-it-professiyam-2025-dlya-teh-kto-hochet-byt-na-volne-700x525.png">
</div>

<div class="gallery">
  <img src="https://naytikurs.ru/assets/uploads/2025/01/java-1-700x525.png" alt="Java логотип">
  <img src="https://naytikurs.ru/assets/uploads/2025/02/mashinnoe-obuchenie-dlya-nachinayushhih-700x700.png" alt="Машинное обучение">
  <img src="https://naytikurs.ru/assets/uploads/2025/02/dengi-slava-i-kod-gid-po-samym-goryachim-it-professiyam-2025-dlya-teh-kto-hochet-byt-na-volne-700x525.png">
</div>

JavaScript

// Выберите все изображения с атрибутом alt и выведите значение атрибута
let imagesWithAlt = document.querySelectorAll('input__1');

imagesWithAlt.forEach((img) => {
  let altValue = img.input__2('input__3');
  console.log(input__4);
});

                     // Выберите все изображения с атрибутом alt и выведите значение атрибута
let imagesWithAlt = document.querySelectorAll('input__1');

imagesWithAlt.forEach((img) => {
  let altValue = img.input__2('input__3');
  console.log(input__4);
});

Для выбора элементов с определенным атрибутом используйте селектор вида 'тег[атрибут]'. Например: 'img[alt]' выберет все изображения с атрибутом alt. После выбора элементов используйте цикл и свойство getAttribute для получения значения атрибута.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Комбинированные селекторы

Задание: найдите все параграфы с классом 'important', которые находятся внутри элемента с id 'article', и добавьте им красную рамку. Используйте комбинированный селектор и метод querySelectorAll.

HTML

Восстановить HTML

                      <div id="article">
  <h2>Важная статья</h2>
  <p>Обычный параграф.</p>
  <p class="important">Важный параграф в статье.</p>
  <p class="important">Еще один важный параграф.</p>
</div>
<div>
  <p class="important">Этот важный параграф находится вне статьи.</p>
</div>

<div id="article">
  <h2>Важная статья</h2>
  <p>Обычный параграф.</p>
  <p class="important">Важный параграф в статье.</p>
  <p class="important">Еще один важный параграф.</p>
</div>
<div>
  <p class="important">Этот важный параграф находится вне статьи.</p>
</div>

JavaScript

// Выберите все параграфы с классом 'important' внутри элемента с id 'article'
let importantParagraphs = document.querySelectorAll('input__1');

importantParagraphs.forEach((paragraph) => {
  paragraph.style.input__2 = "input__3";
});

                     // Выберите все параграфы с классом 'important' внутри элемента с id 'article'
let importantParagraphs = document.querySelectorAll('input__1');

importantParagraphs.forEach((paragraph) => {
  paragraph.style.input__2 = "input__3";
});

Для создания комбинированного селектора соедините несколько селекторов. Например: '#article .important' выберет все элементы с классом 'important' внутри элемента с id 'article'. После выбора элементов используйте цикл и свойство style.border для добавления рамки.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Селектор потомков

Задание: найдите все ссылки, которые являются прямыми потомками элементов списка, и добавьте им класс 'nav-link'. Используйте селектор прямых потомков и метод querySelectorAll.

CSS

.nav-link {
  color: blue;
  font-weight: bold;
  text-decoration: none;
}

HTML

Восстановить HTML

                      <nav>
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li>
      <span><a href="#">Вложенная ссылка</a></span>
    </li>
  </ul>
</nav>

<nav>
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li>
      <span><a href="#">Вложенная ссылка</a></span>
    </li>
  </ul>
</nav>

JavaScript

// Выберите все ссылки, которые являются прямыми потомками элементов списка
let directLinks = document.querySelectorAll('input__1');

directLinks.forEach((link) => {
  link.input__2.input__3('input__4');
});

                     // Выберите все ссылки, которые являются прямыми потомками элементов списка
let directLinks = document.querySelectorAll('input__1');

directLinks.forEach((link) => {
  link.input__2.input__3('input__4');
});

Для выбора элементов, которые являются прямыми потомками других элементов, используйте селектор с символом '>' (больше). Например: 'li > a' выберет все ссылки, которые являются прямыми потомками элементов списка. После выбора элементов используйте цикл и метод classList.add для добавления класса.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Селектор с псевдоклассом

Задание: найдите первый элемент списка и последний элемент списка, и добавьте им разные классы. Используйте селекторы с псевдоклассами :first-child и :last-child.

CSS

.first-item {
  color: green;
  font-weight: bold;
}

.last-item {
  color: red;
  font-style: italic;
}

HTML

Восстановить HTML

                      <ul class="menu">
  <li>Первый пункт</li>
  <li>Второй пункт</li>
  <li>Третий пункт</li>
  <li>Четвертый пункт</li>
  <li>Пятый пункт</li>
</ul>

<ul class="menu">
  <li>Первый пункт</li>
  <li>Второй пункт</li>
  <li>Третий пункт</li>
  <li>Четвертый пункт</li>
  <li>Пятый пункт</li>
</ul>

JavaScript

// Выберите первый и последний элементы списка и добавьте им классы
let firstItem = document.querySelector('input__1');
let lastItem = document.querySelector('input__2');

firstItem.classList.add('input__3');
lastItem.classList.add('input__4');

                     // Выберите первый и последний элементы списка и добавьте им классы
let firstItem = document.querySelector('input__1');
let lastItem = document.querySelector('input__2');

firstItem.classList.add('input__3');
lastItem.classList.add('input__4');

Для выбора первого элемента в родителе используйте псевдокласс :first-child, а для последнего - :last-child. Например: 'li:first-child' выберет первый элемент списка. После выбора элементов используйте метод classList.add для добавления классов.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Выбор элемента по нескольким классам

Задание: найдите все элементы, которые имеют одновременно классы 'item' и 'active', и измените их цвет текста на зеленый. Используйте селектор по нескольким классам и метод querySelectorAll.

HTML

Восстановить HTML

                      <div class="container">
  <div class="item">Обычный элемент</div>
  <div class="item active">Активный элемент</div>
  <div class="active">Только активный</div>
  <div class="item active special">Активный специальный элемент</div>
</div>

<div class="container">
  <div class="item">Обычный элемент</div>
  <div class="item active">Активный элемент</div>
  <div class="active">Только активный</div>
  <div class="item active special">Активный специальный элемент</div>
</div>

JavaScript

// Выберите все элементы с классами 'item' и 'active' и измените их цвет текста
let activeItems = document.querySelectorAll('input__1');

activeItems.forEach((item) => {
  item.input__2.input__3 = "input__4";
});

                     // Выберите все элементы с классами 'item' и 'active' и измените их цвет текста
let activeItems = document.querySelectorAll('input__1');

activeItems.forEach((item) => {
  item.input__2.input__3 = "input__4";
});

Для выбора элементов с несколькими классами соедините классы без пробелов. Например: '.item.active' выберет все элементы, имеющие одновременно классы 'item' и 'active'. После выбора элементов используйте цикл и свойство style.color для изменения цвета текста.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Соседний селектор

Задание: найдите все параграфы, которые следуют непосредственно за заголовками h2, и добавьте им класс 'intro'. Используйте соседний селектор и метод querySelectorAll.

CSS

.intro {
  font-style: italic;
  color: #555;
  border-left: 3px solid #ccc;
  padding-left: 10px;
}

HTML

Восстановить HTML

                      <article>
  <h1>Основной заголовок</h1>
  <p>Этот параграф не должен быть выбран.</p>
  
  <h2>Подзаголовок 1</h2>
  <p>Этот параграф следует за h2 и должен быть выбран.</p>
  <p>Этот параграф не должен быть выбран.</p>
  
  <h2>Подзаголовок 2</h2>
  <p>Этот параграф также следует за h2 и должен быть выбран.</p>
</article>

<article>
  <h1>Основной заголовок</h1>
  <p>Этот параграф не должен быть выбран.</p>
  
  <h2>Подзаголовок 1</h2>
  <p>Этот параграф следует за h2 и должен быть выбран.</p>
  <p>Этот параграф не должен быть выбран.</p>
  
  <h2>Подзаголовок 2</h2>
  <p>Этот параграф также следует за h2 и должен быть выбран.</p>
</article>

JavaScript

// Выберите все параграфы, которые следуют непосредственно за h2
let introParagraphs = document.querySelectorAll('input__1');

introParagraphs.forEach((paragraph) => {
  paragraph.input__2.input__3('input__4');
});

                     // Выберите все параграфы, которые следуют непосредственно за h2
let introParagraphs = document.querySelectorAll('input__1');

introParagraphs.forEach((paragraph) => {
  paragraph.input__2.input__3('input__4');
});

Для выбора элементов, которые следуют непосредственно за другими элементами, используйте селектор с символом '+' (плюс). Например: 'h2 + p' выберет все параграфы, которые следуют непосредственно за заголовками h2. После выбора элементов используйте цикл и метод classList.add для добавления класса.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Селектор по атрибуту со значением

Задание: найдите все ссылки, у которых атрибут target имеет значение '_blank', и добавьте им класс 'external'. Используйте селектор по атрибуту со значением и метод querySelectorAll.

CSS

.external::after {
  content: " ↗";
  color: red;
}

HTML

Восстановить HTML

                      <div class="links">
  <a href="https://example.com">Обычная ссылка</a>
  <a href="https://example.com" target="_blank">Внешняя ссылка 1</a>
  <a  href="https://another-site.com" target="_blank">Внешняя ссылка 2</a>
  <a href="page.html" target="_self">Внутренняя ссылка</a>
</div>

<div class="links">
  <a href="https://example.com">Обычная ссылка</a>
  <a href="https://example.com" target="_blank">Внешняя ссылка 1</a>
  <a  href="https://another-site.com" target="_blank">Внешняя ссылка 2</a>
  <a href="page.html" target="_self">Внутренняя ссылка</a>
</div>

JavaScript

// Выберите все ссылки с target="_blank" и добавьте им класс 'external'
let externalLinks = document.querySelectorAll('input__1');

externalLinks.input__2((link) => {
  link.classList.input__3('input__4');
});

                     // Выберите все ссылки с target="_blank" и добавьте им класс 'external'
let externalLinks = document.querySelectorAll('input__1');

externalLinks.input__2((link) => {
  link.classList.input__3('input__4');
});

Для выбора элементов с атрибутом, имеющим определенное значение, используйте селектор вида 'тег[атрибут="значение"]'. Например: 'a[target="_blank"]' выберет все ссылки с атрибутом target, равным '_blank'. После выбора элементов используйте цикл и метод classList.add для добавления класса.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Селектор по части значения атрибута

Задание: найдите все изображения, у которых в пути (атрибут src) содержится слово 'it-professiyam', и добавьте им класс 'it-image'. Используйте селектор по части значения атрибута и метод querySelectorAll.

CSS

.it-image {
  border: 2px dashed blue;
  padding: 5px;
}

HTML

Восстановить HTML

                      <div class="gallery">
  <img src="https://naytikurs.ru/assets/uploads/2025/01/java-1-700x525.png" alt="Java">
  <img src="https://naytikurs.ru/assets/uploads/2025/02/dengi-slava-i-kod-gid-po-samym-goryachim-it-professiyam-2025-dlya-teh-kto-hochet-byt-na-volne-700x525.png" alt="IT профессии">
  <img src="https://naytikurs.ru/assets/uploads/2025/02/mashinnoe-obuchenie-dlya-nachinayushhih-700x700.png" alt="Машинное обучение">
  <img src="https://naytikurs.ru/assets/uploads/2025/02/ne-kodom-edinym-6-it-professij-dlya-teh-kto-ne-druzhit-s-programmirovaniem-700x525.png" alt="IT без кода">
</div>

<div class="gallery">
  <img src="https://naytikurs.ru/assets/uploads/2025/01/java-1-700x525.png" alt="Java">
  <img src="https://naytikurs.ru/assets/uploads/2025/02/dengi-slava-i-kod-gid-po-samym-goryachim-it-professiyam-2025-dlya-teh-kto-hochet-byt-na-volne-700x525.png" alt="IT профессии">
  <img src="https://naytikurs.ru/assets/uploads/2025/02/mashinnoe-obuchenie-dlya-nachinayushhih-700x700.png" alt="Машинное обучение">
  <img src="https://naytikurs.ru/assets/uploads/2025/02/ne-kodom-edinym-6-it-professij-dlya-teh-kto-ne-druzhit-s-programmirovaniem-700x525.png" alt="IT без кода">
</div>

JavaScript

// Выберите все изображения, содержащие 'it-professiyam' в src, и добавьте им класс 'it-image'
let itImages = document.querySelectorAll('input__1');

itImages.forEach((image) => {
  image.input__2.input__3('input__4');
});

                     // Выберите все изображения, содержащие 'it-professiyam' в src, и добавьте им класс 'it-image'
let itImages = document.querySelectorAll('input__1');

itImages.forEach((image) => {
  image.input__2.input__3('input__4');
});

Для выбора элементов с атрибутом, содержащим определенную подстроку, используйте селектор вида 'тег[атрибут*="подстрока"]'. Например: 'img[src*="it-professiyam"]' выберет все изображения с атрибутом src, содержащим 'it-professiyam'. После выбора элементов используйте цикл и метод classList.add для добавления класса.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Универсальный селектор

Задание: найдите все элементы внутри контейнера с классом 'box', и добавьте им обводку. Используйте универсальный селектор в сочетании с другими селекторами и метод querySelectorAll.

HTML

Восстановить HTML

                      <div class="container">
  <div class="box">
    <h2>Заголовок в боксе</h2>
    <p>Параграф в боксе</p>
    <span>Span в боксе</span>
    <a href="#">Ссылка в боксе</a>
  </div>
  <p>Параграф вне бокса</p>
</div>

<div class="container">
  <div class="box">
    <h2>Заголовок в боксе</h2>
    <p>Параграф в боксе</p>
    <span>Span в боксе</span>
    <a href="#">Ссылка в боксе</a>
  </div>
  <p>Параграф вне бокса</p>
</div>

JavaScript

// Выберите все элементы внутри контейнера с классом 'box' и добавьте им обводку
let boxElements = document.querySelectorAll('input__1');

boxElements.forEach((element) => {
  element.style.input__2 = "input__3";
});

                     // Выберите все элементы внутри контейнера с классом 'box' и добавьте им обводку
let boxElements = document.querySelectorAll('input__1');

boxElements.forEach((element) => {
  element.style.input__2 = "input__3";
});

Универсальный селектор представлен символом '*' и выбирает все элементы. Его можно комбинировать с другими селекторами. Например: '.box *' выберет все элементы внутри контейнера с классом 'box'. После выбора элементов используйте цикл и свойство style.border для добавления обводки.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Селекторы по состоянию

Задание: найдите все отмеченные (checked) флажки на странице и выведите значения их атрибутов 'value' в консоль. Используйте селектор с псевдоклассом :checked и метод querySelectorAll.

HTML

Восстановить HTML

                      <form>
  <div>
    <input type="checkbox" id="option1" value="HTML" checked>
    <label for="option1">HTML</label>
  </div>
  <div>
    <input type="checkbox" id="option2" value="CSS">
    <label for="option2">CSS</label>
  </div>
  <div>
    <input type="checkbox" id="option3" value="JavaScript" checked>
    <label for="option3">JavaScript</label>
  </div>
  <div>
    <input type="checkbox" id="option4" value="PHP">
    <label for="option4">PHP</label>
  </div>
</form>

<form>
  <div>
    <input type="checkbox" id="option1" value="HTML" checked>
    <label for="option1">HTML</label>
  </div>
  <div>
    <input type="checkbox" id="option2" value="CSS">
    <label for="option2">CSS</label>
  </div>
  <div>
    <input type="checkbox" id="option3" value="JavaScript" checked>
    <label for="option3">JavaScript</label>
  </div>
  <div>
    <input type="checkbox" id="option4" value="PHP">
    <label for="option4">PHP</label>
  </div>
</form>

JavaScript

// Выберите все отмеченные флажки и выведите их значения
let checkedBoxes = document.querySelectorAll('input__1');

checkedBoxes.forEach((checkbox) => {
  console.log(checkbox.input__2);
});

                     // Выберите все отмеченные флажки и выведите их значения
let checkedBoxes = document.querySelectorAll('input__1');

checkedBoxes.forEach((checkbox) => {
  console.log(checkbox.input__2);
});

Для выбора элементов в определенном состоянии используйте псевдоклассы. Например: 'input[type="checkbox"]:checked' выберет все отмеченные флажки. После выбора элементов используйте цикл и свойство value для получения значения.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку