Спасибо, ты хорошо описал задачу. Вот что я понял, шаг за шагом. Проверь, всё ли верно:

✅ Цель:

Работаем с .steps-main, .choicereturn и .order-kp-list.
Нужно:

1. Получить ID из .choicereturn, извлечь цифру (например, из st3 — это 3)

2. Сохранить её в cookie в формате JSON как ключ

3. Найти .order-kp-list input:checked, взять его value и сохранить в этот же cookie (в массив значений)

4. Добавить класс .choice-kp-list к соответствующим label, у которых input.value входит в массив cookie

5. Отслеживать изменения .choicereturn и обновлять cookie, если значение изменилось

❓ Уточнения:

1. .choicereturn — это input? div? span? Нужен тип элемента.

2. Cookie должна быть одна? Или для каждого stX отдельная запись?
   Например:

   json
   Копировать код
   {
     "3": ["423", "460"],
     "4": ["500"]
   }
   

3. Cookie имя — фиксированное или любое? Например, choiceKP

Если всё выше верно, вот jQuery-код, реализующий все 5 шагов:

javascript
Копировать код
$(document).ready(function () {
  function getCookie(name) {
    const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
    if (match) return JSON.parse(decodeURIComponent(match[2]));
    return {};
  }

  function setCookie(name, value) {
    document.cookie = name + "=" + encodeURIComponent(JSON.stringify(value)) + "; path=/";
  }

  function updateKP() {
    const cookieName = "choiceKP";
    let kpData = getCookie(cookieName);

    $('.steps-main .choicereturn').each(function () {
      const idStr = $(this).attr('id'); // например, st3
      const idMatch = idStr.match(/\d+/);
      if (!idMatch) return;

      const id = idMatch[0];

      // Найти чекнутые input внутри .order-kp-list
      let values = [];
      $('.order-kp-list input:checked').each(function () {
        values.push($(this).val());
      });

      // Записать в cookie
      kpData[id] = values;
      setCookie(cookieName, kpData);

      // Обновить классы
      $('.order-kp-list').each(function () {
        const input = $(this).find('input');
        const val = input.val();
        const label = $(this).find('label');

        if (values.includes(val)) {
          label.addClass('choice-kp-list');
        } else {
          label.removeClass('choice-kp-list');
        }
      });
    });
  }

  // Инициализация
  updateKP();

  // Отслеживание изменений .choicereturn
  let prevIDs = [];

  setInterval(function () {
    const newIDs = $('.steps-main .choicereturn').map(function () {
      return $(this).attr('id');
    }).get();

    if (JSON.stringify(newIDs) !== JSON.stringify(prevIDs)) {
      prevIDs = newIDs;
      updateKP();
    }
  }, 1000); // Проверка каждую секунду (можно изменить)
});

🔄 Что делает код:

• Извлекает id из .choicereturn

• Сохраняет value выбранных input в .order-kp-list

• Записывает всё в cookie (choiceKP)

• Добавляет класс choice-kp-list к label, если value есть в куках

• Отслеживает динамические изменения в .choicereturn (каждую секунду)

Если нужно:

• использовать localStorage вместо cookie

• хранить cookie с датой истечения

• использовать change-событие вместо setInterval

— сообщи, переделаю под эти условия.

Готов поправить код под твою структуру, если дадишь точный вид .choicereturn.

Отлично, спасибо за уточнения! Обновлю план и код с учётом:

✅ Уточнённая задача:

Цель:

1. В .steps-main находим input:checked

2. У его соседнего label добавляем .choicereturn и берём его id, например st3 → 3

3. Сохраняем 3 как ключ в куки choiceKP (JSON)

4. Сохраняем value всех input:checked из .order-kp-list как массив в этом ключе

5. У label, у которых input.value есть в куке, добавляем .choice-kp-list

6. Проверяем динамически, изменились ли id с .choicereturn, если да — пересохраняем

💡 Пример структуры cookie:

json
Копировать код
{
  "3": ["423", "460"]
}

✅ Обновлённый jQuery-код:

javascript
Копировать код
$(document).ready(function () {
  const COOKIE_NAME = "choiceKP";

  function getCookie(name) {
    const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
    return match ? JSON.parse(decodeURIComponent(match[2])) : {};
  }

  function setCookie(name, value) {
    document.cookie = name + "=" + encodeURIComponent(JSON.stringify(value)) + "; path=/";
  }

  function extractId(str) {
    const match = str.match(/\d+/);
    return match ? match[0] : null;
  }

  function updateKP() {
    const kpData = getCookie(COOKIE_NAME);

    // 1. Найти все input:checked в .steps-main
    $('.steps-main input:checked').each(function () {
      const $input = $(this);
      const $label = $('label[for="' + $input.attr('id') + '"]');
      const labelId = $label.attr('id');

      if (!labelId) return;

      const keyId = extractId(labelId);
      if (!keyId) return;

      // 2. Собрать все чекнутые value в .order-kp-list
      const values = $('.order-kp-list input:checked').map(function () {
        return $(this).val();
      }).get();

      // 3. Записать в куки
      kpData[keyId] = values;
      setCookie(COOKIE_NAME, kpData);

      // 4. Добавить/удалить классы
      $('.order-kp-list').each(function () {
        const $block = $(this);
        const $input = $block.find('input');
        const $label = $block.find('label');
        const val = $input.val();

        if (values.includes(val)) {
          $label.addClass('choice-kp-list');
        } else {
          $label.removeClass('choice-kp-list');
        }
      });
    });
  }

  // 5. Следим за динамическими изменениями
  let prevKeys = "";

  setInterval(() => {
    let currentKeys = $('.steps-main input:checked').map(function () {
      const label = $('label[for="' + $(this).attr('id') + '"]');
      return label.attr('id');
    }).get().join(',');

    if (currentKeys !== prevKeys) {
      prevKeys = currentKeys;
      updateKP();
    }
  }, 1000);

  // Первый запуск
  updateKP();
});

🧪 Что тебе нужно подготовить в HTML:

1. У label, привязанного к input:checked внутри .steps-main, должен быть ID, например:

   html
   Копировать код
   <input type="radio" id="listGroupRadioGrid0" checked />
   <label id="st3" for="listGroupRadioGrid0">...</label>
   

   — этот id="st3" и используется для ключа куки.

2. Убедись, что .order-kp-list — это блоки, внутри которых:

   html
   Копировать код
   <input type="radio" value="423" checked />
   <label for="...">...</label>
   

Если нужно:

• отреагировать на change вместо setInterval

• использовать localStorage вместо cookie

• сделать очистку/удаление из cookie при снятии выбора

— сообщи, допишу.

Спасибо за замечание — всё правильно: если label уже имеет ID st3, и в .steps-main .choicereturn мы ищем элемент с ID, то нельзя дублировать ID, иначе будет конфликт в $('#st3'), и .choicereturn может не работать как нужно.

🔧 Что делать?

Всё зависит от реальной структуры DOM. Вот 2 возможных сценария:

🅰️ Сценарий 1:

.choicereturn — это не label, а отдельный input, div или другой элемент, и у него уже есть ID (st3, st4 и т.д.).
Тогда всё ОК — не трогаем ID у label, и просто считываем ID из .choicereturn как было в первом коде.

✅ Пример:

html
Копировать код
<div class="steps-main">
  <input type="radio" id="r1" checked>
  <label for="r1">...</label>
  <input class="choicereturn" id="st3" type="hidden" />
</div>

Тогда оставляем:

js
Копировать код
$('.steps-main .choicereturn').each(function () {
  const idStr = $(this).attr('id'); // st3
});

🅱️ Сценарий 2:

Ты хотел сделать label с id="st3" — и это та самая .choicereturn. Но этот же ID уже может быть использован — это плохо (нарушение уникальности).

Тогда предлагаю так:

• оставить id только у .choicereturn (как input, div, span, и т.д.)

• использовать data-id у label, если тебе нужно связать с ним данные

• или добавить .choicereturn как класс к нужному label, но использовать data-id="st3" или data-choice="3" — и брать это значение, не используя id

✅ Пример:

html
Копировать код
<label class="choicereturn" data-choice="3" for="...">...</label>

Тогда:

js
Копировать код
$('.steps-main .choicereturn').each(function () {
  const idStr = $(this).data('choice'); // "3"
});

✅ Рекомендуемый подход:

Если ID конфликтует — не используй id в HTML, а храни значения в data-* атрибутах.

💡 Пример:

html
Копировать код
<label class="choicereturn" data-choice="3" for="radio1">...</label>

Код:

js
Копировать код
$('.steps-main .choicereturn').each(function () {
  const keyId = $(this).data('choice'); // Получаем "3"
});

💬 Вывод:

• ❌ Не присваивай id="st3" нескольким элементам

• ✅ Используй data-choice="3" в label, если он становится .choicereturn

• ✅ Или сделай отдельный input.choicereturn, и у него уникальный ID (st3)

Если подскажешь, что конкретно должно быть .choicereturn, я сразу подправлю весь код под твой HTML.

Отлично, теперь всё ясно. Вот итог задачи с последними уточнениями:

✅ ЗАДАЧА (финальная формулировка):

1. В .steps-main найти input:checked

2. У его label[for=...] добавить класс .choicereturn

3. Взять его id (например, st3) → достаём число 3

4. Сохранить в одну cookie с именем choiceKP в формате:

   json
   Копировать код
   { "3": ["423", "460"] }
   

5. Из .order-kp-list взять все input:checked → получить массив value

6. Добавить класс .choice-kp-list к label, если значение value этого input есть в куке

7. Отслеживать изменения .choicereturn (т.е. label, у которого был for=input.id и checked стал на другом input)

   • если изменился ID, то пересохраняем данные

⚠️ Уточнение

К label (у input внутри .order-kp-list) нужно добавлять класс .choice-kp-list если его value есть в куке

✅ HTML структура (предполагаемая)

html
Копировать код
<div class="steps-main">
  <input type="radio" id="stepRadio1" name="step" checked />
  <label for="stepRadio1" id="st3">...</label>
</div>

<div class="order-kp-list">
  <input type="radio" id="listGroupRadioGrid0" value="423" checked />
  <label for="listGroupRadioGrid0">...</label>
</div>

<div class="order-kp-list">
  <input type="radio" id="listGroupRadioGrid1" value="460" />
  <label for="listGroupRadioGrid1">...</label>
</div>

✅ jQuery-код

javascript
Копировать код
$(document).ready(function () {
  const COOKIE_NAME = "choiceKP";

  function getCookie(name) {
    const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
    return match ? JSON.parse(decodeURIComponent(match[2])) : {};
  }

  function setCookie(name, value) {
    document.cookie = name + "=" + encodeURIComponent(JSON.stringify(value)) + "; path=/";
  }

  function extractNumberFromId(id) {
    const match = id.match(/\d+/);
    return match ? match[0] : null;
  }

  function updateKP() {
    const kpData = getCookie(COOKIE_NAME);

    // Удалим старые .choicereturn классы
    $('.steps-main label').removeClass('choicereturn');

    // Найдём input:checked внутри .steps-main
    $('.steps-main input:checked').each(function () {
      const $input = $(this);
      const inputId = $input.attr('id');

      const $label = $('label[for="' + inputId + '"]');
      $label.addClass('choicereturn');

      const labelId = $label.attr('id'); // должен быть вида st3
      const key = extractNumberFromId(labelId);
      if (!key) return;

      // Получаем все выбранные значения из .order-kp-list
      const selectedValues = $('.order-kp-list input:checked').map(function () {
        return $(this).val();
      }).get();

      // Сохраняем в куку
      kpData[key] = selectedValues;
      setCookie(COOKIE_NAME, kpData);

      // Обновляем классы .choice-kp-list
      $('.order-kp-list').each(function () {
        const $radio = $(this).find('input');
        const $label = $(this).find('label');
        const val = $radio.val();

        if (selectedValues.includes(val)) {
          $label.addClass('choice-kp-list');
        } else {
          $label.removeClass('choice-kp-list');
        }
      });
    });
  }

  // Отслеживаем изменения выбора в .steps-main
  let prevSelectedId = null;

  setInterval(() => {
    const $checkedInput = $('.steps-main input:checked');
    const $label = $('label[for="' + $checkedInput.attr('id') + '"]');
    const currentId = $label.attr('id');

    if (currentId !== prevSelectedId) {
      prevSelectedId = currentId;
      updateKP();
    }
  }, 500);

  // Первая инициализация
  updateKP();
});

🔄 Что делает код:

• Определяет label с ID (например, st3) у input:checked в .steps-main

• Использует цифру из id как ключ в cookie choiceKP

• Сохраняет value выбранных .order-kp-list input:checked

• Добавляет класс .choice-kp-list к label, если value в куке

• Обновляет всё динамически при смене выбора в .steps-main

Если хочешь использовать change событие вместо setInterval — можно оптимизировать. Напиши, и я подскажу более чистый вариант без таймера.

Спасибо, теперь всё абсолютно ясно ✅.
Ты отлично объяснил, и теперь можно точно реализовать:

🎯 Цель (финально):

1. В .steps-main только один .choicereturn (например, button#st3.choicereturn)
   → взять его id (st3) → извлечь цифру → это будет ключ

2. В .order-kp-list найти input:checked → взять его value
   → сохранить в cookie (имя cookie: choiceKP) как:

   json
   Копировать код
   { "3": ["423"] }
   

3. На загрузке страницы:

   • считать куку choiceKP

   • взять значения value по текущему ключу (3)

   • найти input[value="423"] и добавить .choice-kp-list к его label[for="..."]

4. При выборе другого .choicereturn (то есть активируется другая вкладка):

   • обновить куку с новым ключом и новым массивом

   • обновить классы .choice-kp-list

5. При перезагрузке страницы — всё восстановить

✅ Готовый jQuery-код:

javascript
Копировать код
$(document).ready(function () {
  const COOKIE_NAME = 'choiceKP';

  function getCookie(name) {
    const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
    return match ? JSON.parse(decodeURIComponent(match[2])) : {};
  }

  function setCookie(name, value) {
    document.cookie = name + '=' + encodeURIComponent(JSON.stringify(value)) + '; path=/';
  }

  function getCurrentKeyId() {
    const $active = $('.steps-main .choicereturn.active'); // активная кнопка
    if (!$active.length) return null;
    const idStr = $active.attr('id'); // "st3"
    const match = idStr.match(/\d+/);
    return match ? match[0] : null;
  }

  function getCheckedOrderValues() {
    return $('.order-kp-list input:checked').map(function () {
      return $(this).val();
    }).get();
  }

  function applyChoiceKpListFromCookie() {
    const kpData = getCookie(COOKIE_NAME);
    const key = getCurrentKeyId();
    if (!key || !kpData[key]) return;

    const values = kpData[key];

    // Удалить старые классы
    $('.order-kp-list label').removeClass('choice-kp-list');

    // Добавить новые
    $('.order-kp-list input').each(function () {
      const val = $(this).val();
      if (values.includes(val)) {
        const id = $(this).attr('id');
        $('label[for="' + id + '"]').addClass('choice-kp-list');
      }
    });
  }

  function updateCookieFromCurrentSelection() {
    const kpData = getCookie(COOKIE_NAME);
    const key = getCurrentKeyId();
    if (!key) return;

    const values = getCheckedOrderValues();
    kpData[key] = values;
    setCookie(COOKIE_NAME, kpData);
  }

  function updateAll() {
    updateCookieFromCurrentSelection();
    applyChoiceKpListFromCookie();
  }

  // Обновить при клике по .choicereturn (смена вкладки)
  $('.steps-main').on('click', '.choicereturn', function () {
    $('.choicereturn').removeClass('active');
    $(this).addClass('active');
    updateAll();
  });

  // Обновить при выборе в .order-kp-list
  $('.order-kp-list input').on('change', function () {
    updateAll();
  });

  // При первой загрузке
  applyChoiceKpListFromCookie();
});

📦 Пример cookie:

json
Копировать код
{
  "3": ["423"],
  "4": ["460"]
}

💡 Примечания:

• Ключ 3 — это ID из #st3, активной .choicereturn

• Значения — это массив выбранных input.value в .order-kp-list

• При перезагрузке всё восстанавливается

• При смене вкладки .choicereturn — всё меняется

• Работает без setInterval, всё на click/change

Если ты используешь реальные табы или кнопку перезагружает страницу, и ты хочешь запоминать состояние активной вкладки .choicereturn — можно тоже сохранить это в cookie. Скажи — добавлю.

Отлично, значит мы почти у цели 💪
Теперь задача — не перезаписывать массив value в куке при выборе в .order-kp-list, а:

✅ Что нужно:

1. При выборе нового input:checked внутри .order-kp-list:

   • не заменять весь массив,

   • а добавить новое значение, если его ещё нет

   • удалить старые, если были unchecked (опционально — ты уточнишь)

2. При чтении куки:

   • пройтись по всем значениям из массива и для каждого input.value, найти label и добавить к нему .choice-kp-list

🔄 Уточни:

Хочешь ли ты:

• ✅ Добавлять новые value в массив

• ⬜ Удалять из массива value, если input сняли (unchecked)?
  (или массив должен расти и запоминать всё, что когда-либо выбиралось?)

Если удаление нужно — напиши, добавлю. Сейчас покажу вариант только с добавлением новых.

✅ Обновлённый код (только добавление новых value):

javascript
Копировать код
$(document).ready(function () {
  const COOKIE_NAME = 'choiceKP';

  function getCookie(name) {
    const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
    return match ? JSON.parse(decodeURIComponent(match[2])) : {};
  }

  function setCookie(name, value) {
    document.cookie = name + '=' + encodeURIComponent(JSON.stringify(value)) + '; path=/';
  }

  function getCurrentKeyId() {
    const $active = $('.steps-main .choicereturn.active');
    if (!$active.length) return null;
    const idStr = $active.attr('id');
    const match = idStr.match(/\d+/);
    return match ? match[0] : null;
  }

  function applyChoiceKpListFromCookie() {
    const kpData = getCookie(COOKIE_NAME);
    const key = getCurrentKeyId();
    if (!key || !kpData[key]) return;

    const values = kpData[key];

    $('.order-kp-list label').removeClass('choice-kp-list');

    $('.order-kp-list input').each(function () {
      const val = $(this).val();
      const id = $(this).attr('id');
      if (values.includes(val)) {
        $('label[for="' + id + '"]').addClass('choice-kp-list');
      }
    });
  }

  function updateCookieAddValue(newValue) {
    const kpData = getCookie(COOKIE_NAME);
    const key = getCurrentKeyId();
    if (!key) return;

    // Инициализировать если нет
    if (!Array.isArray(kpData[key])) {
      kpData[key] = [];
    }

    // Добавить новое значение, если его ещё нет
    if (!kpData[key].includes(newValue)) {
      kpData[key].push(newValue);
      setCookie(COOKIE_NAME, kpData);
    }
  }

  function updateAll() {
    applyChoiceKpListFromCookie();
  }

  // Обработка клика по вкладкам
  $('.steps-main').on('click', '.choicereturn', function () {
    $('.choicereturn').removeClass('active');
    $(this).addClass('active');
    updateAll();
  });

  // Обработка выбора КП
  $('.order-kp-list input').on('change', function () {
    if ($(this).is(':checked')) {
      const val = $(this).val();
      updateCookieAddValue(val);
      applyChoiceKpListFromCookie();
    }
  });

  // При загрузке страницы — восстановить
  applyChoiceKpListFromCookie();
});

✅ Что делает этот код:

• При выборе чекнутого input:

  • добавляет value в массив, если такого ещё нет

• Не стирает старые значения

• Класс .choice-kp-list добавляется ко всем label, чьи input.value есть в куке

• Все данные хранятся в одном cookie choiceKP под ключом из id активной кнопки .choicereturn

📌 Если нужно:

• Удалять значения из массива, если input стал unchecked

• Ограничить массив (например, максимум 1 или 5 значений)

• Работать с чекбоксами вместо радиокнопок

• Сохранять вкладку .choicereturn между перезагрузками

— скажи, легко добавлю.