Checkbox для заказчика. JavaScript

[rembo]

Здравствуйте, Алексей. Спасибо за уроки, очень помогают. Очень нужно видео, выбор товаров по параметрах, как на hotline - как связать таблицы характеристик, бренда, категории, цены, скидки и вывести через php. Спасибо. Надеюсь Вы прочитаете комментарий.

[hbuljxp]

Очень хорошие нужные уроки, спасибо за ваши труды.

[jljzjvg]

было бы оч акутально про промисы и async await поговорить, +fetch

[marinaermilova]

Спасибо. Все великолепно, как обычно.

[whwwlpl]

Количество проверок можно уменьшить вдвое. При включении чекбокса надо проверить, не включены ли два других одновременно. И если да, то отключить один из них.

[dlehbdz]

В теории может быть ошибка из-за того что событие клика генерируется и при выключении чекбокса .Можно просто проверить в начали состояние включёности елемента и на этом экономить память и не выполнять дальнейших операций если мы его выключаем

[dereckridler]

Здравствуйте, Алексей. Сколько себя помню, мне всегда говорили, что избыточность кода это плохой показатель и наличие повторяющихся циклов тому свидетельство. Можно ли его оптимизировать ибо для реализации в интернет магазине такое вряд ли сработает при 40 вариантах checkbox-ов будет 40х30 циклов?

[rogaldorn]

Ух, прошел год и наткнулся на это видео.
Классная идея, но у Алекса не совсем удачная вышла реализация по двум причинам.
1. Большое количество проверок, которое в самом деле можно сократить вдвое.
2. UI/UX страдает от того, что происходит неправильное отключение чекбоксов. Разберем на примере из видео:
2.1. Мы выбрали Быстро
2.2. Мы выбрали Дешево
2.3 Мы выбрали Качественно и отключилось Дешево
2.4 Пользователь не понимает, почему отключился пункт меню, который он только что выбрал.
В 2.4 лучше отключить Быстро, так как он был нажат раньше, чем Дешево. Это не вызовет фрустрации от того, что мы выключили то, что пользователь секунду назад включил.
Как же будет выглядеть такая логика дальше? Пользователь нажмет на Быстро и выключится Дешево, нажмет на Дешево - выключится Качественно. То есть нам нужно выключать пред-предыдущий элемент. Тем самым мы не вызываем фрустрации у пользователя, так как не отключаем предыдущий элемент и сохраняем логику - всегда отключается пред-предыдущий элемент.

[jljzjvg]

а можно было сделать так: даем value 1, 2, 3- пробегаем по массиву чекбоксов- определяем текущего последнего чекеда value и делаем исключение 3 switch\case
////а можно было бы и через reduce()тогда еще в 2 раза меньше кода////

=> {
element.addEventListener('click', function (element) {
chekk(element);
});
}, this);


var chekk = function (checkBox) {
let allCheks =
let chekedArr = allCheks.filter(function (el) {
return el.checked;
});
if (chekedArr.length == 3) {
switch (checkBox.target.value) {
case '1':
chekedArr[2].checked = false;
break;
case '2':
chekedArr[0].checked = false;
break;
case '3':
chekedArr[1].checked = false;
break;
}
}
}

[PIKUC]

Стилизовать чекбоксы и радио лучше так:
1) Ставим чекбокс (а можно радио) и сразу за ним label
2) Даем чекбоксу id, а элементу label такое-же значение атрибута for
3) В CSS делаем чекбоксу position: absolute; height: 1px; width: 1px; opacity: 0; (Не скрываем совсем чтобы браузерной подсказке "Отметьте флажок" было к чему присосаться.)
4) Даем элементу label position: relative; padding-left: 50px (Выбирайте сами, в зависимости от своей задачи).
5) Пора нарисовать сам флаг. Пользуемся комбинациями селекторов: input[type="checkbox"] + label:after {стили для неотмеченного чекбокса} и + label:after {стили для отмеченного чекбокса}. В этих стилях обязательно используем content: "": иначе элемент не появится.

Таким образом можно получить эффективную конструкцию без лишнего мусора и на голом css, без использования js и подключения лишних библиотек.

[entity]

const = Да { very.Спасибо } :)

[delayLama_ru]

Думаю всетаки лучше делать через массив. т.к. этих чекбоксов в последствии может стать 5 или 7.

[dzbot]

Простите что слегка не на том видео. Но тут просмотров больше будет ) В вашем видео 'Работаем с Animate.css делаем слайдер на JS' столкнулся с любопытной проблемой. Ничего не работает ))) При загрузке сайта (с хрома) Animate происходит один раз анимация и все. Больше там анимации не работают. Так же в фаерфоксе. При разработке вообще ничего не работает. А вот в опере(vpn) и IE11 все ок!!! С мобилы на хроме тоже все норм. Попытка отследить проблему - DevTools - Security выдает unknown/canceled - для загрузки кода jquery. Есть идеи как разрешить загрузку?? Спасибо. Видео уже лайкнул )