Как установить атрибут checked для динамически созданных радиокнопок в JavaScript?

Оффтоп javascript
1

Привет всем! У меня возник вопрос по JavaScript и динамическому созданию форм. Я пытаюсь сделать так, чтобы радиокнопки, которые я создаю динамически с помощью fetch-запроса, автоматически отмечались как выбранные в зависимости от значения переменной.

Вот что я делаю:

  1. Получаю данные через fetch
  2. На основе этих данных создаю радиокнопки
  3. У меня есть переменная decision, которая может быть ‘Y’ или ‘N’

Как мне сделать так, чтобы нужная радиокнопка была отмечена (checked) в зависимости от значения decision, если эта переменная устанавливается уже после создания кнопок?

Я пробовал использовать что-то вроде:

let radioDecision = '';
data.forEach(item => {
  radioDecision += `<input type="radio" name="decision" value="${item.CODE}" ${decision === item.CODE ? 'checked' : ''}> ${item.DESCRIPTION}<br>`;
});

Но это не работает, так как decision определяется позже. Есть ли способ это исправить? Буду благодарен за любые идеи!

2

слушай, я тут недавно разбирался с этим вопросом и могу поделиться своим решением. вместо того чтобы пытаться установить checked при создании, попробуй сделать это отдельным шагом. создай кнопки как обычно, а потом используй метод querySelectorAll чтобы найти все радиокнопки и пройтись по ним циклом. примерно так:

const radios = document.querySelectorAll(‘input[name=“decision”]’);
radios.forEach(radio => {
if (radio.value === decision) {
radio.checked = true;
}
});

это должно сработать даже если decision определяется позже. главное вызвать этот код после того как ты узнаешь значение decision. надюсь это поможет!

3

Понимаю твою проблему, сам сталкивался. Вот что можно сделать:

После создания радиокнопок, используй метод querySelector для поиска нужной кнопки и установки checked:

document.querySelector(`input[name="decision"][value="${decision}"]`).checked = true;

Это сработает, даже если decision определяется позже. Просто вызови этот код после того, как значение decision станет известно.

Еще совет - используй DocumentFragment для оптимизации производительности при создании множества элементов. Так избежишь лишних ререндеров.