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

Последнее обновление: 1.11.2015

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

Флажки представляют поле, в которое можно поставить отметки и которое создается с помощью элемента <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.

Checkbox в JavaScript

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

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

<form name="myForm">
	<input type="radio" name="languages" checked="checked" 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>
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

RadioButton в JavaScript

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

myForm.languages[myForm.languages.length-1].checked = true;
Помощь сайту
WebMoney
  • P378451176208
  • Z280152397659
ЮMoney/Яндекс-Деньги
  • 410011174743222
PayPal
  • metanit22@mail.ru
Перевод на карту
  • Номер карты: 4048415020898850