如何用普通按钮模拟JavaScript中单选按钮的:checked功能？

没问题！我刚好有两个实用的方案能帮你搞定这个需求——用普通按钮复刻单选框的「唯一选中」效果，同时精准获取当前点击按钮的值。

方案一：CSS类 + 原生JavaScript（轻量无依赖） #

这个方案最直接，完全不用依赖任何框架，通过给按钮添加/移除自定义类来标记选中状态，再用JS处理点击逻辑。

1. HTML结构 #

给所有需要模拟单选的按钮加统一的类（比如.radio-button），用data-value属性存储每个按钮对应的值：

<button class="radio-button" data-value="option1">选项1</button>
<button class="radio-button" data-value="option2">选项2</button>
<button class="radio-button" data-value="option3">选项3</button>

2. CSS样式 #

定义「选中状态」的样式，和默认状态区分开（比如背景色、边框变化）：

.radio-button {
  padding: 8px 16px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  margin-right: 8px;
}

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

3. JavaScript逻辑 #

监听按钮的点击事件，每次点击时先移除所有按钮的active类，再给当前点击的按钮加上，最后获取它的data-value：

// 获取所有目标按钮
const radioButtons = document.querySelectorAll('.radio-button');

radioButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 移除所有按钮的选中类
    radioButtons.forEach(btn => btn.classList.remove('active'));
    // 给当前点击的按钮添加选中类
    this.classList.add('active');
    // 获取当前按钮的值
    const selectedValue = this.dataset.value;
    console.log('选中的值：', selectedValue);
    // 这里可以把值用到你的业务逻辑里，比如提交、渲染等
  });
});

方案二：隐藏单选框 + 按钮关联（贴合表单语义） #

如果你的按钮是在表单里，这个方案更合适——用隐藏的原生单选框和按钮绑定，既能利用CSS的:checked伪类，还能天然支持表单提交的单选逻辑。

1. HTML结构 #

每个按钮对应一个隐藏的input[type="radio"]，用label包裹实现关联：

<label class="radio-label">
  <input type="radio" name="options" value="option1" hidden>
  <button type="button">选项1</button>
</label>
<label class="radio-label">
  <input type="radio" name="options" value="option2" hidden>
  <button type="button">选项2</button>
</label>
<label class="radio-label">
  <input type="radio" name="options" value="option3" hidden>
  <button type="button">选项3</button>
</label>

2. CSS样式 #

利用:checked伪类，给选中状态对应的按钮设置样式：

.radio-label button {
  padding: 8px 16px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  margin-right: 8px;
}

/* 当单选框被选中时，对应的按钮样式变化 */
.radio-label input:checked + button {
  background: #2196F3;
  color: #fff;
  border-color: #1976D2;
}

3. JavaScript逻辑 #

监听单选框的change事件，就能获取选中的值（因为label关联，点击按钮会自动触发单选框的选中状态）：

// 获取所有隐藏的单选框
const radioInputs = document.querySelectorAll('input[name="options"]');

radioInputs.forEach(input => {
  input.addEventListener('change', function() {
    if (this.checked) {
      const selectedValue = this.value;
      console.log('选中的值：', selectedValue);
      // 业务逻辑处理
    }
  });
});

方案对比 #

• 方案一：更轻量，适合非表单场景，完全自定义逻辑，不需要依赖原生表单控件。
• 方案二：更符合HTML语义，能和表单无缝结合，原生单选框的「唯一选中」逻辑不需要自己写，省掉了移除所有选中类的代码。

你可以根据自己的实际场景选一个就行啦~

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