需求：将多选ListView改为单选模式，适配自定义Toggle Button并获取选中ID

我来帮你搞定这个需求！其实实现单选的自定义Toggle Button并不复杂，核心就是控制选中状态的排他性，结合动态元素生成和样式切换就行，我给你整理了完整的实现方案：

1. 基础HTML结构 #

先准备一个容器用来放动态生成的Toggle按钮：

<div id="toggleContainer"></div>

2. 自定义Toggle Button样式 #

用CSS实现未选中/选中的差异化样式，你可以根据需求调整颜色、大小这些细节：

/* 基础Toggle按钮样式 */
.toggle-btn {
  padding: 8px 16px;
  margin: 0 8px 8px 0;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 选中状态的样式 */
.toggle-btn.toggle-active {
  border-color: #2196F3;
  background-color: #E3F2FD;
  color: #1976D2;
}

/* 鼠标悬停效果 */
.toggle-btn:hover {
  border-color: #90CAF9;
}

3. JavaScript核心逻辑 #

这段代码会动态生成5个Toggle Button，同时实现单选逻辑，并且能获取选中按钮的ID：

// 获取容器元素
const toggleContainer = document.getElementById('toggleContainer');
// 用来存储当前选中的按钮ID（可选，方便后续使用）
let selectedToggleId = null;

// 动态生成5个Toggle Button
for (let i = 1; i <= 5; i++) {
  const toggleBtn = document.createElement('button');
  // 设置唯一ID，格式可以自己调整
  toggleBtn.id = `toggle-btn-${i}`;
  // 添加基础样式类
  toggleBtn.className = 'toggle-btn';
  // 设置按钮显示文本
  toggleBtn.textContent = `选项 ${i}`;
  
  // 绑定点击事件，实现单选逻辑
  toggleBtn.addEventListener('click', function() {
    // 第一步：取消所有Toggle按钮的选中状态
    document.querySelectorAll('.toggle-btn').forEach(btn => {
      btn.classList.remove('toggle-active');
    });
    
    // 第二步：设置当前按钮为选中状态
    this.classList.add('toggle-active');
    
    // 第三步：记录当前选中的按钮ID
    selectedToggleId = this.id;
    // 这里可以根据需求做后续操作，比如打印ID或者传给其他逻辑
    console.log('当前选中的按钮ID:', selectedToggleId);
  });
  
  // 将按钮添加到容器中
  toggleContainer.appendChild(toggleBtn);
}

关键逻辑说明 #

• 单选排他性：每次点击按钮时，先通过querySelectorAll获取所有Toggle按钮，移除它们的toggle-active类，再给当前点击的按钮添加这个类，确保同一时间只有一个按钮处于选中状态。
• 动态生成：通过循环创建按钮元素，给每个按钮设置唯一ID，方便后续识别。
• 获取选中ID：用变量selectedToggleId存储当前选中的ID，你可以在需要的地方直接使用这个变量，或者在点击事件里直接处理ID相关的逻辑。

你可以把这些代码整合到你的项目里，要是需要调整样式或者逻辑细节，直接修改对应的部分就行~

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