Самым простым для освоения является элемент checkbox. Checkbox – это флажок, переключатель который описывается с помощью кода html:
|
1 |
<input type="checkbox" id=”one”> |
Пример checkbox
Пример checkbox
Чекбокс может иметь два состояния – выбран или нет. Соответственно с помощью JS можно научиться считывать эти состояния и определять выбран ли checkbox или нет.
Для проверки состояния нам необходимо получить доступ к элементу. Это легко сделать если у элемента есть id:
|
1 2 |
var chbox; chbox=document.getElementById('one'); |
Проверка элемента осуществляется с помощью проверки состояния элемента:
элемент.checked
|
1 2 3 4 5 6 7 |
if (chbox.checked) { alert('Выбран'); } else { alert ('Не выбран'); } } |
Данная запись возвращает true если элемент отмечен галочкой, и false – если не активен. Соответственно данную запись можно использовать при проверке условия.
Для проверки состояния элемента checkbox удобно использовать событие onchange — которое происходит при любой смене состояния элемента. Полный код использования chekbox выглядит следующим образом:
HTML
|
1 |
<input type="checkbox" id="one" onchange="fun1()"> Пример checkbox |
JAVA SCRIPT
|
1 2 3 4 5 6 7 8 9 10 |
function fun1() { var chbox; chbox=document.getElementById('one'); if (chbox.checked) { alert('Выбран'); } else { alert ('Не выбран'); } } |
Как обычно, вы можете посмотреть пример работы на codepen
See the Pen js checkbox by Alex (@luschenko) on CodePen.
Примечание. Маленькая хитрость. Если обернуть элемент checkbox и надпись в один label – то элемент checkbox будет активироваться даже при клике на надписи. Попробуйте!
|
1 |
<label><input type="checkbox">Кликни на надписи</label> |
See the Pen checkbox & label by Alex (@luschenko) on CodePen.
Спасибо за хитрость, как раз обдумываю создание фильтра для своего сайта.