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

Сheckbox

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

Radio

Переключатели представляют группы кнопок, из которых мы можем выбрать только одну, переключатели создаются элементом 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

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

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