Задать вопрос
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 FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Full-Stack для сайта на Bitrix (Аспро). Знания в Java, CSS и PHP
12 нояб. 2024, в 16:00
150000 руб./за проект
Разместить шаблон сайта с личным кабинетом под хостинг серверов
28 нояб. 2024, в 00:33
5000 руб./за проект
Нужно записать видео уроки по машинному обучению
28 нояб. 2024, в 00:20
2400 руб./за проект
Ещё заказы