选择多个按钮答案

【问题标题】：Selecting several buttons选择多个按钮
【发布时间】：2020-02-24 19:20:27
【问题描述】：

如何选择一个按钮（不是单选按钮或复选框按钮），而是选择会改变然后改变颜色的整个按钮？这个想法是有人会选择多个按钮然后提交它们。

【问题讨论】：

“这个想法是有人会选择多个按钮然后提交它们”——这就是复选框的设计目的。
您的问题需要澄清一下。
如果您不想这样做，您可以让复选框看起来像一个按钮。而且您不必跟踪点击的内容

标签： javascript html css twitter-bootstrap bootstrap-4

【解决方案1】：

您仍然可以使用复选框并使其看起来像按钮。由于您使用引导程序，因此非常简单。

.cb-btn:checked + label {
  background-color: Green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<input type="checkbox" id="cb1" hidden class="cb-btn"><label class="btn btn-primary" for="cb1">Foo</label>

<input type="checkbox" id="cb2" hidden class="cb-btn"><label class="btn btn-primary" for="cb2">Bar</label>

<input type="checkbox" id="cb3" hidden class="cb-btn"><label class="btn btn-primary" for="cb3">Bacon</label>

【讨论】：

谢谢，这正是我想要的。

【解决方案2】：

对于每个按钮，您可以添加一个onclick 函数，然后更改button 的颜色。

<button onclick = "document.getElementById("myButton").style.backgroundColor = "blue";">Button</button>

【讨论】：