JobHub.ru — система автоматизации и управления бизнесом

Сентябрь

Выделение элемента при нажатии чекбокса [jquery]

Понадобилось мне тут на одном проекте (магазин на Shop-Script’e) сделать красивое сравнение товаров, чтобы при нажатии checkbox’а у товара менялся цвет рамки. Решение нашлось довольно быстро, спасибо гуглу

Итак, подключаем jquery и прописываем вот такой простенький кусок кода

$(function() {
	$(".compare_check").change(function() {
		if($(this).is(':checked'))
			$(this).parents('li').addClass('products_select');
		else
			$(this).parents('li').removeClass('products_select');
	});
})

Сама разметка будет вот такого вида

<input type="checkbox" value="1" name="ComparisonCheckBox_145" class="compare_check" />

Из кода скрипта видно, что при изменении состояния чекбокса, родителю li задается класс products_select, стили которому можно уже задать любые. В моем случае это была замена рамки с серой на голубую и задание небольшой тени вокруг (выглядит красиво).

Живой пример

Тэги: jquery, shop-script, webasyst

не совсем по теме, но все же, а как ограничить число сравниваемых товаров на одной странице, ну скажем 3-мя товарами? просто если выбрать для сравнения много товаров и нажать Сравнить, то весь дизайн поедет…

Ответить

Hunter

17 Октябрь 2011 в 16:09

и вдогонду
Как Вы сделали на сайте из Примера предзагрузку фото товаров красивую?

Ответить

mdss

17 Октябрь 2011 в 16:18

@Hunter:
не озадачивался, наврядли можно это сделать, проще вывод страницы сравнения править

@Hunter:
http://makexhtml.ru/2011/predzagruzka-izobrazhenij-na-jquery-jquery-preload/

Ответить

Дмитрий

6 Декабрь 2011 в 19:08

Не давно Столкнулся с подобным вопросом, только выделялся input[radio]
Главное что такой подход работал с чекбоксом, а с радио ну не хотел удалять класс.
На будущее предсавлю свой код( для радио проверки чекнут ли не надо)

$(document).ready(function(){
  $('li input[type="radio"]').bind('click',function(e) {
                    var $this = $(this);
                        $this.parent().addClass('selected');
                        $this.parent().siblings('li').removeClass('selected');
                });
});

Ответить

mdss

6 Декабрь 2011 в 19:35

@Дмитрий:
можно было попробовать еще на проверку атрибута checked сделать

Ответить

Дмитрий

18 Декабрь 2011 в 1:27

@mdss: именно Input[radio]
не нужно проверять, он или чекнут или нет))))

Ответить

mdss

18 Декабрь 2011 в 11:45

@Дмитрий:
я как-то плавно пропустил ту строку где это написано было

Ответить

Выделение элемента при нажатии чекбокса [jquery]

Живой пример

Комментарии

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

Архив

Друзья

Метки

Выделение элемента при нажатии чекбокса [jquery]

Живой пример

Комментарии

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

Архив

Поиск

Друзья

Метки