Из них видно, как мы скрываем оригинальные чекбоксы, чтобы они оставались на странице, но не мешались.
Теперь добавляем jQuery код, который будет следовать нашей логике, описанной выше:
$(document).ready(function() { // Ждём загрузки страницы
for (var i = 0; i < $('.checkbox').length; i++) { // Обходим все чекбоксы, которые нужно изменить
var element = $($('.checkbox')[i]); // Получаем текущий чекбокс через jQuery
if (element.attr("checked") == "checked") { // Если чекбокс по-умолчанию активный
element.addClass('number'+i).wrap("<span class='span_checkbox active'></span>"); // то оборачиваем span`ом активным
}
else {
element.addClass('number'+i).wrap("<span class='span_checkbox'></span>"); // оборачиваем не активным span`ом
}
}
$(".span_checkbox").click(function(){ // Событие нажатия на span(мнимый чекбокс)
var tmp = $(this); // Получаем нажатый span через jQuery
if (tmp.hasClass('active')) { // Если мнимый чекбокс активный
tmp.removeClass('active'); // то делаем его не активным
tmp.children('.checkbox').removeAttr("checked"); // у настоящего чекбокса убираем выделение
}
else {
tmp.addClass('active'); // иначе делаем его активным
tmp.children('.checkbox').attr("checked", "checked"); // у настоящего чекбокс добавляем выделение
}
});
});
Как обычно - этот код обильно снабжен поясняющими комментариями.
Приветствую всех посетителей моего сайта. В этой статья я расскажу вам о языках программирования, которые нужны для управления, созданий и разработки своего сайта.
С этой статьи я начинаю свой цикл, посвященный основам HTML, где я буду доступным и постараюсь понятным для новичков языком объяснять основы данного веб-языка.
Продолжаю цикл статей, посвященный изучению основ HTML и это второй урок, в котором я расскажу вам о базовой структуре HTML странички и тут же мы поговорим о тегах.
Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:
Мы обнаружили, что у вас установлено расширение AdBlock или программа Adguard или другое ПО, блокирующее показ рекламы на сайте. Мы прекрасно понимаем Вас, но реклама - единственный способ заработка сайта, его отсутствие мешает развитию. Поэтому хотели бы Вас попросить отключить блокирование рекламы на сайте. Со своей стороны обещаем не добавлять навязчивую рекламу - которая будет перекрывать сайт или открывать новые вкладки. Как отключить блокировку рекламы в adBlock Как отключить блокировку рекламы в Adguard В противном случае это сообщение будет переодически показываться Вам, большое спасибо за понимание.
Добавить комментарий
Авторизоваться с помощью: