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

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

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

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

<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, относящееся к элементу, который запустил событие. Это полезно для создания обработчиков событий – наш обработчик может быть вызван разными элементами, и у него должен быть способ получить доступ к текущему элементу, который его вызвал.