Иногда возникает задача проверить состояние чекбокса (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 для совместимости };
Комментариев нет:
Отправить комментарий