Флажки и переключатели

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

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

	<form name="myForm">
	<input type="checkbox" name="enabled" checked><span>Включить</span>
	</form>
	<div id="printBlock"></div>
	<script>
	var enabledBox = document.myForm.enabled;
	
	function onclick(e){
	var printBlock = document.getElementById("printBlock");
	var enabled = e.target.checked;
	printBlock.textContent = enabled;
	}
	
	enabledBox.addEventListener("click", onclick);
	</script>
	

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

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

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

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

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

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

	
for (var 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; Output