Флажки и радиокнопки

Особую группу элементов ввода составляют флажки (чекбоксы) и радиокнопки.

Флажки представляют поле, в которое можно поставить отметки и которое создается с помощью элемента <input type="checkbox". Отличительную особенность флажка составляет свойство checked, которое в отмеченном состоянии принимает значение true:

<form name="myForm">
	<input type="checkbox" name="enabled" checked><span>Включить</span>
</form>
<div id="printBlock"></div>
<script>
const enabledBox = document.myForm.enabled;
const printBlock = document.getElementById("printBlock");
//  в текст printBlock передаем установленное значение
enabledBox.addEventListener("click", (e)=> printBlock.textContent = e.target.checked);
</script>

Нажатие на флажок генерирует событие click. В данном случае при обработке данного события мы просто выводим информацию, отмечен ли данный флажок, в блок div.

Радиокнопки представляют группы кнопок, из которых мы можем выбрать только одну. Радиокнопки создаются элементом <input type="radio".

Выбор или нажатие на одну из них также представляет событие click:

<form name="myForm">
	<input type="radio" name="languages" value="Java" /><span>Java</span>
	<input type="radio" name="languages" value="C#" /><span>C#</span>
	<input type="radio" name="languages" value="C++" /><span>C++</span>
</form>
<div id="printBlock"></div>
<script>
const printBlock = document.getElementById("printBlock");
const myForm = document.myForm;
function onclick(e){
	printBlock.textContent = `Вы выбрали: ${language}`;
}
for (let i = 0; i < myForm.languages.length; i++) {
	myForm.languages[i].addEventListener("click", onclick);
}
</script>

При создании группы радиокнопок их атрибут name должен иметь одно и то же значение. В данном случае это - languages. То есть радиокнопки образуют группу languages.

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

for (let i = 0; i < myForm.languages.length; i++) {
	myForm.languages[i].addEventListener("click", onclick);
}

Значение выбранного радиокнопки также можно получить через объект Event: e.target.value

Каждая радиокнопка также, как и флажок, имеет свойство checked, которое возвращает значение true, если радиокнопка отмечена. Например, отметим последняя радиокнопка:

myForm.languages[myForm.languages.length-1].checked = true;