Поиск по этому блогу

среда, 6 июня 2012 г.

Как проверить состояние checkbox-а используя jQuery

Иногда возникает задача проверить состояние чекбокса (checkbox) в форме HTML и в зависимости от его состояния показать/скрыть другие элементы формы. Итак, допустим наш элемент имеет идентификатор "surnameCB", а элемент, который нужно показать/скрыть - "surnameTXT". Одной из возможных реализций задачи показа/скрытия элемента страницы в зависимости от переключателя формы является следующая:
if ($('#surnameCB').is(':checked')) {
    $('#surnameTXT').show();
} else {
    $('#surnameTXT').hide();
} 
или более короткая (но менее удобочитаемая) запись:
$('#surnameCB').is(':checked') ? $("#surnameTXT").show() : $("#surnameTXT").hide();
В данных примерах используется метод .is() вместо .attr(), т.к. начиная с версии 1.6 разработчики не рекомендуют использовать последний для определения состояния флажка, вместо него можно использовать $('#surnameCB').prop('checked'), который возвращает true или false в зависимости от того отмечен флажек или нет
Также этот код можно просто реализовать без использования jQuery:
var surnameCheckbox = document.getElementById('surnameCB');
var surnameInput = document.getElementById('surnameTXT');
// Для совместимости со старыми версиями IE
surnameCheckbox.onchange = function() {
    // Проверка отмечен ли флажком checkbox.
    surnameInput.hidden = this.checked ? false : true;
    //Хотя, вместо hidden лучше использовать surnameInput.style.display для совместимости
};

Комментариев нет:

Отправить комментарий