Иногда возникает задача проверить состояние чекбокса (checkbox) в форме HTML и в зависимости от его состояния показать/скрыть другие элементы формы. Итак, допустим наш элемент имеет идентификатор "surnameCB", а элемент, который нужно показать/скрыть - "surnameTXT". Одной из возможных реализций задачи показа/скрытия элемента страницы в зависимости от переключателя формы является следующая:
Также этот код можно просто реализовать без использования jQuery:
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 для совместимости
};
Комментариев нет:
Отправить комментарий