如何实现HTML表单中按钮样式的可切换输入控件？

直接用原生的复选框（checkbox）或单选框（radio）结合CSS就能搞定，完全不用复杂的事件驱动逻辑，提交表单时自动带上选中值。

多选可切换按钮（支持选多个） #

先写HTML结构，把原生复选框隐藏，用<label>来做按钮外观：

<form>
  <div class="button-group">
    <input type="checkbox" id="opt1" name="selected-options" value="option1">
    <label for="opt1">选项1</label>
    
    <input type="checkbox" id="opt2" name="selected-options" value="option2">
    <label for="opt2">选项2</label>
    
    <input type="checkbox" id="opt3" name="selected-options" value="option3">
    <label for="opt3">选项3</label>
  </div>
  <button type="submit">提交表单</button>
</form>

再用CSS把label改成按钮样式，选中时切换外观：

/* 隐藏原生复选框 */
.button-group input[type="checkbox"] {
  display: none;
}

/* 默认按钮样式 */
.button-group label {
  display: inline-block;
  padding: 8px 16px;
  margin: 0 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
}

/* 选中后的按钮样式 */
.button-group input[type="checkbox"]:checked + label {
  background: #0078d4;
  color: #fff;
  border-color: #0078d4;
}

单选可切换按钮（只能选一个） #

如果需要单选效果，把复选框换成单选框就行，注意单选框的name属性要一致：

<form>
  <div class="button-group">
    <input type="radio" id="radio-1" name="single-option" value="radio1">
    <label for="radio-1">单选选项1</label>
    
    <input type="radio" id="radio-2" name="single-option" value="radio2">
    <label for="radio-2">单选选项2</label>
    
    <input type="radio" id="radio-3" name="single-option" value="radio3">
    <label for="radio-3">单选选项3</label>
  </div>
  <button type="submit">提交表单</button>
</form>

CSS和多选类似，只需要把选择器换成radio：

.button-group input[type="radio"] {
  display: none;
}

.button-group label {
  display: inline-block;
  padding: 8px 16px;
  margin: 0 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
}

.button-group input[type="radio"]:checked + label {
  background: #2ecc71;
  color: #fff;
  border-color: #2ecc71;
}

这种方案完全依赖原生表单控件，提交时会自动把选中的value值带到表单数据里，不需要额外写JS处理事件，样式还能根据自己的需求随便调整颜色、圆角、间距这些。

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