如何用JavaScript动态创建Bootstrap单选按钮 实现每个卡片默认选中Yes

问题原因 #

同一页面内，name属性完全相同的单选按钮会被浏览器识别为同一组，同组单选按钮天然互斥，仅能有一个处于选中状态。你所有卡片的Yes/No单选按钮都共用了name="choosePred"，因此无论怎么设置选中状态，最终都只会保留一个选中项，也就是你看到的仅第一个卡片的Yes处于选中状态。

解决方法 #

给每个轮播卡片的单选按钮组设置独立的name值，直接复用循环的索引idx做区分即可：
找到创建单选按钮的代码段，修改name赋值逻辑：

// 原来的 yesInput.name = "choosePred"; 替换为
yesInput.name = `choosePred_${idx}`;

// 原来的 noInput.name = "choosePred"; 替换为
noInput.name = `choosePred_${idx}`;

修改完成后，每个卡片的单选按钮为独立分组，互不干扰，创建时设置的yesInput.checked = true会直接生效，循环结束后额外写的批量设置选中的代码可以直接删除。

额外优化提示 #

你当前创建轮播项的代码存在类名重复添加的问题，且默认激活的是第二个轮播项（索引为1），可以调整为更合理的写法：

const carouselItem = document.createElement("div");
// 先统一加基础类
carouselItem.classList.add("carousel-item");
// 第一个轮播项加激活类
if (idx === 0) {
  carouselItem.classList.add("active");
}

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