Галочки и радиокнопки.

Поле галочки – простой бинарный переключатель. Его значение можно извлечь или поменять через свойство checked, содержащее булевскую величину.

<input type="checkbox" id="purple">

<label for="рurрlе">Сделать страницу фиолетовой</lаbеl>

<script>

Var checkbox = document.querySelector("#purple");

Checkbox.addEventListener("change", function() {

Document.body.style.background =

Checkbox.checked ? "mediumpurple" : "";

});

</script>

Тег <label> используется для связи куска текста с полем ввода. Атрибут for должен совпадать с id поля. Щелчок по метке label включает поле ввода, оно получает фокус и меняет значение – если это галочка или радиокнопка.

Радиокнопка схожа с галочкой, но она связана с другими радиокнопками с тем же именем, так что только одна из них может быть выбрана.

Цвет:

<input type="radio" name="color" value="mediumpurple"> Фиолетовый.

<input type="radio" name="color" value="lightgreen"> Зелёный.

<input type="radio" name="color" value="lightblue"> Голубой.

<script>

Var buttons = document.getElementsByName("color");

Function setColor(event) {

Document.body.style.background = event.target.value;

}

For (var i = 0; i < buttons.length; i++).

Buttons[i].addEventListener("change", setColor);

</script>

Метод document.getElementsByName выдаёт все элементы с заданным атрибутом name. Пример перебирает их (посредством обычного цикла for, а не forEach, потому что возвращаемая коллекция – не настоящий массив) и регистрирует обработчик событий для каждого элемента. Помните, что у объектов событий есть свойство target, относящееся к элементу, который запустил событие. Это полезно для создания обработчиков событий – наш обработчик может быть вызван разными элементами, и у него должен быть способ получить доступ к текущему элементу, который его вызвал.