JS设置radio的.checked属性不更新界面，与setAttribute有何区别？

代码存在的核心问题 #

• 状态判断逻辑错误：你用getAttribute('checked')获取的是HTML标签的静态初始属性，该值不会随着单选框的实时选中状态变化更新，无法用来判断当前是否选中。正确方式是直接读取DOM元素的checked布尔属性。
• 状态修改逻辑不匹配：你之前用.checked = true界面不更新，大概率是自定义单选框样式用了input[checked]属性选择器，而非:checked伪类，仅修改DOM属性不会触发样式更新；而只用setAttribute修改HTML属性，又不会同步单选框组的动态状态，导致后续逻辑判断出错。

.checked赋值和setAttribute('checked', 'checked')的核心区别 #

• .checked是DOM元素的动态布尔属性：负责控制单选框的实时选中状态，修改时会自动同步同name属性单选组内其他选项的状态，同时触发change事件，匹配CSS的:checked伪类。页面加载完成后，该属性的变化和HTML标签上的checked属性无实时关联。
• setAttribute('checked', 'checked')修改的是HTML标签的静态内容属性：仅会影响DOM元素的defaultChecked默认选中属性（即表单重置时的恢复状态），不会自动同步同组单选的选中状态，也不会触发change事件，仅匹配CSS的[checked]属性选择器。

修复后的代码参考 #

修改状态更新逻辑 #

const firstRadioChange = () => {
  pictureSlideBox.style.transform = null;
  allRadio.forEach(radio => {
    radio.checked = false; // 更新动态选中状态
    radio.removeAttribute('checked'); // 同步HTML属性适配样式
  });
  firstRadio.checked = true;
  firstRadio.setAttribute('checked', 'checked');
};

修改状态判断逻辑 #

// 直接读取动态布尔属性判断当前选中状态
if (firstRadio.checked) {
  backgroundChange();
  setTimeout(zIndexChange, 3000);
} else {
  firstRadioChange();
  setTimeout(backgroundChange, 3000);
  setTimeout(zIndexChange, 5000);
}

另外建议排查单选框的CSS样式，把input[checked]选择器替换为input:checked，后续只需要操作.checked属性即可同时同步状态和样式。

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