动态创建Radio Button后，如何根据变量设置其checked状态？

我通过Fetch方法获取数据并动态构建表单单选按钮，目前遇到的问题是：单选按钮创建完成后，当decision变量被设置为"N"或"Y"时，无法让对应单选按钮自动处于选中状态。需要注意的是，decision变量是在Fetch构建完单选按钮之后才设置的。

获取到的数据 #

[
  {
    "ROW_NUMBER": 1,
    "DATA_CODE": "Decision",
    "CODE": "N",
    "DESCRIPTION": "Reviewed Comment, No Response Required"
  },
  {
    "ROW_NUMBER": 2,
    "DATA_CODE": "Decision",
    "CODE": "Y",
    "DESCRIPTION": "Response Entered Below"
  }
]

数据获取与动态构建代码 #

let radioDecision;

fetch('URL', options)
  .then(response => response.json())
  .then(data => {
     Object.entries(data).forEach(([key, value]) => {
       radioDecision += `<input type="radio" id="decision" name="decision" class="form-check-input" value="${value.CODE}" required> ${value.DESCRIPTION}<br/>`
     });
  })
  .catch((error) => {
     toastr["error"]("Something went wrong.", "Error");
  });

静态单选按钮的实现方式（参考） #

静态场景下，我通过变量判断为单选按钮添加checked属性：

let decision_selection_1;
let decision_selection_2;

decision = 'N';

decision_selection_1 = decision == "N" ? "checked" : "";
decision_selection_2 = decision == "Y" ? "checked" : "";

对应的HTML：

<div class="form-check">
      <input type="radio" id="decision" name="decision" class="form-check-input" value="N" ${decision_selection_1} required>
      Review Comment, No Response Required
</div>
<div class="form-check">
     <input type="radio" id="decision" name="decision" class="form-check-input" value="Y" ${decision_selection_2} required>
     Response Entered Below
     <div class="valid-feedback">Completed!</div>
     <div class="invalid-feedback">Please make a selection.</div>
 </div>

渲染后的源码：

<div class="form-check">
  <input type="radio" id="decision" name="decision" class="form-check-input" value="N" checked required=""> Reviewed Comment, No Response Required
<br>
  <input type="radio" id="decision" name="decision" class="form-check-input" value="Y" required=""> Response Entered Below<br>
  <div class="valid-feedback">Completed!</div>
  <div class="invalid-feedback">Please make a selection.</div>
</div>

动态构建后的现状 #

动态生成的单选按钮插入DOM后，没有自动选中对应选项：

<div class="form-check">
  ${radioDecision}
  <div class="valid-feedback">Completed!</div>
  <div class="invalid-feedback">Please make a selection.</div>
</div>

渲染后的源码：

<div class="form-check">
  <input type="radio" id="decision" name="decision" class="form-check-input" value="N" required=""> Reviewed Comment, No Response Required
<br>
  <input type="radio" id="decision" name="decision" class="form-check-input" value="Y" required=""> Response Entered Below<br>
  <div class="valid-feedback">Completed!</div>
  <div class="invalid-feedback">Please make a selection.</div>
</div>

解决方案 #

方案1：构建DOM时动态添加checked属性（适合提前获取到decision值的场景） #

如果能在生成HTML字符串时拿到decision的值，直接在构建单选按钮时判断添加checked属性，同时修复id重复的问题（HTML中id必须唯一）：

let radioDecision = ''; // 初始化空字符串，避免开头出现undefined

fetch('URL', options)
  .then(response => response.json())
  .then(data => {
     // 假设此处已获取到decision值，或之后会设置
     const decision = 'N'; // 示例值，实际根据业务逻辑获取

     Object.entries(data).forEach(([key, value]) => {
       // 动态判断是否添加checked属性
       const checkedAttr = decision === value.CODE ? 'checked' : '';
       // 给每个单选按钮设置唯一id
       radioDecision += `<input type="radio" id="decision_${value.CODE}" name="decision" class="form-check-input" value="${value.CODE}" ${checkedAttr} required> ${value.DESCRIPTION}<br/>`;
     });

     // 将生成的HTML插入到DOM容器中
     document.querySelector('.form-check').innerHTML = radioDecision + `
       <div class="valid-feedback">Completed!</div>
       <div class="invalid-feedback">Please make a selection.</div>
     `;
  })
  .catch((error) => {
     toastr["error"]("Something went wrong.", "Error");
  });

方案2：DOM插入后通过JS设置选中状态（适合decision后续才确定的场景） #

如果decision确实是在DOM插入之后才设置的，可通过DOM查询找到对应单选按钮并设置checked属性：

let radioDecision = '';
let decision; // 后续会赋值的变量

// 完成数据获取与DOM插入
fetch('URL', options)
  .then(response => response.json())
  .then(data => {
     Object.entries(data).forEach(([key, value]) => {
       // 设置唯一id
       radioDecision += `<input type="radio" id="decision_${value.CODE}" name="decision" class="form-check-input" value="${value.CODE}" required> ${value.DESCRIPTION}<br/>`;
     });

     document.querySelector('.form-check').innerHTML = radioDecision + `
       <div class="valid-feedback">Completed!</div>
       <div class="invalid-feedback">Please make a selection.</div>
     `;

     // 如果此时decision已经赋值，直接调用设置函数
     if (decision) {
       setCheckedRadio(decision);
     }
  })
  .catch((error) => {
     toastr["error"]("Something went wrong.", "Error");
  });

// 设置选中状态的工具函数
function setCheckedRadio(decisionValue) {
  // 通过name和value属性定位单选按钮
  const targetRadio = document.querySelector(`input[name="decision"][value="${decisionValue}"]`);
  if (targetRadio) {
    targetRadio.checked = true;
  }
}

// 后续某个时机设置decision并触发选中
decision = 'N';
setCheckedRadio(decision);

内容的提问来源于stack exchange，提问作者user3685388