Элемент checkbox на Javascript

При работе с форматами HTML часто приходится работать с чекбоксами, которые активируют определенные сценарии обработки данных форм. Самый популярный пример – чекбокс «Я согласен с правилами…», которые необходимо отметить, в результате чего кнопка отправки формы станет активной.

Самый простой для освоения – элемент checkbox. Он представляет собой флажок, переключатель который описывается посредством HTTML-кода:

<input type=»checkbox»id=”one”>

Checkbox имеет два состояния – выбран или нет. Поэтому с помощью JS легко научиться считывать эти состояния и определять выбран ли чекбокс или нет. Чтобы проверить состояние нужно получить доступ к данному элементу. Если у элемента есть id, то это не составит труда:

var chbox;
chbox=document.getElementById(‘one’);

Проверка элемента выполняется с помощью проверки состояния элемента:

if (chbox.checked) {
alert(‘Выбран’);
}
else {
alert (‘Не выбран’);
}
}

Приведенная выше запись возвращает false, если элемент не выбран, и true – если отмечен галочкой. Эту запись можно применять при проверке условия. Чтобы проверить состояние элемента чекбокс можно использовать событие onchange. Оно происходит при смене состояния элемента.

Приведем пример кода использования chekbox:

HTML

<input type=»checkbox» id=»one» onchange=»fun1()»>

Пример checkbox

JAVA SCRIPT
function fun1() {
var chbox;
chbox=document.getElementById(‘one’);
if (chbox.checked) {
alert(‘Выбран’);
}
else {
alert (‘Не выбран’);
}

Как проверить чекбокс при помощи jQuery (jquery checkbox checked)

В целом проверка чекбокса осуществляется несколькими способами. Первый и самый элементарный – проверка у чебокса атрибута checked . Это делается на чистом js или же обратившись свойству свойству checked.

Пример:

if(this.checked){
// …
}

либо посредством jQuery метода prop(), возвращающего значение атрибута, переданного как аргумент. Как вы уже поняли, у атрибута checked может быть только 2 значения: true или false. Поэтому если $(‘input’).prop(‘checked’) возвращает true – значит чекбокс выбран.

<script>
jQuery(document).ready(function($){

$(‘input[type=»checkbox»]’).on(‘change’, function(){

// Это короткая запись которая означает то же, что и if($(this).prop(‘checked’) == true)
if($(this).prop(‘checked’))
alert(‘Чекбокс выбран’);
});

});
</script>

<inputtype=»checkbox» name=»checkbox» />

Второй способ — проверка псевдокласса: checked, который добавляется отмеченным чекбоксам. Наличие псевдокласса можно проверить при помощи jQuery метода is():

<script>
jQuery(document).ready(function($){
$(‘input[name=»trigger»]’).on(‘change’, function($){

if($(this).is(‘:checked’))
$(‘input[name=»target»]’).show();

else
$(‘input[name=»target»]’).hide();
});
});
</script>

 

<form>
<inputtype=»checkbox» name=»trigger» />
<inputtype=»text» name=»target» style=»display:none» />
</form>

Псевдоклассы в CSS и jQuery –полезная и интересная вещь, которая заслуживает более детального изучения. Обязательно узнайте о них в других материалах нашего сайта.