Задать вопрос
AntonBrock
@AntonBrock
screen light
javascript

Как сократить код используя цикл?

$(".check_care").on("click", function() {
  icons_care = "";

  if (!!$("#c_001 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_001 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_002 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_002 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_003 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_003 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_004 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_004 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_005 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_005 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_006 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_006 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_007 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_007 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_008 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_008 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_009 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_009 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_010 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_010 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_011 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_011 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_012 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_012 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_013 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_013 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_014 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_014 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_015 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_015 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_016 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_016 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_017 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_017 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_018 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_018 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_019 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_019 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_020 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_020 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_021 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_021 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_022 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_022 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_023 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_023 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_024 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_024 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_025 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_025 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_026 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_026 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_027 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_027 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_028 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_028 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_029 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_029 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_030 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_030 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_031 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_031 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_032 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_032 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_033 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_033 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_034 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_034 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_035 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_035 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_036 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_036 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_037 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_037 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_038 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_038 input[type='checkbox']:checked").attr("data-icon");
  }
  if (!!$("#c_039 input[type='checkbox']:checked").attr("data-icon")) {
    icons_care =
      icons_care + $("#c_039 input[type='checkbox']:checked").attr("data-icon");
  }

  $("#icons_care").val(icons_care);
});

https://codepen.io/AntonBrock/pen/GzZvZx?editors=1010
  • Вопрос задан
  • 128 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript 
const inputSelector = '#icons_care';
const checkboxSelector = '.check_care';
const checkboxCheckedSelector = `${checkboxSelector}:checked`;
const dataAttr = 'icon';
const separator = ', ';

$(document).on('change', checkboxSelector, () => {
  $(inputSelector).val($(checkboxCheckedSelector)
    .get()
    .map(n => $(n).data(dataAttr))
    .join(separator)
  );
});

// или

document.addEventListener('change', e => {
  if (e.target.matches(checkboxSelector)) {
    const input = document.querySelector(inputSelector);
    const cb = document.querySelectorAll(checkboxCheckedSelector);
    input.value = Array.from(cb, n => n.dataset[dataAttr]).join(separator);
  }
});
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Senior Fullstack JavaScript Node.js + React
Simplenight inc.
от 4 000 до 6 500 $
Ещё вакансии
Заказы с Хабр Фриланса
Название проекта: Бот Telegram для автоматизации судебных приказов
05 мая 2024, в 02:15
30000 руб./за проект
Десктоп приложение для добавления товаров на Python
05 мая 2024, в 01:43
5000 руб./за проект
Разработка 3D моделей
05 мая 2024, в 01:37
1500 руб./за проект
Ещё заказы