如果我从一个组中选择一个按钮，它可以正常工作。但是，如果我从下一组中选择了一个按钮，它就会忘记第一组的选择。这是我在Stack Overflow上多次看到的一个问题，每次解决方案都是给组中的每个按钮一个与其他组不同的名称。然而，我尝试过这个解决方案，但一次只能从一个按钮组中选择一个按钮。还有什么原因导致了这种情况？
https://getbootstrap.com/docs/4.5/components/button-group/
请参阅下面的代码：
<form method=”POST”>
<div id="friendly" class="btn-group" role="group" aria-label="Basic example">
<div class="input-group-prepend">
<span class="input-group-text" id="addon-wrapping">ESG Consideration (select one)</span>
</div>
<button name="friendly" value="very-high" type="button" class="btn btn-secondary">Very High</button>
<button name="friendly" value="high" type="button" class="btn btn-secondary"> High </button>
<button name="friendly" value="medium" type="button" class="btn btn-secondary"> Medium </button>
<button name="friendly" value="low" type="button" class="btn btn-secondary"> Low </button>
<button name="friendly" value="very-low" type="button" class="btn btn-secondary"> Very Low</button>
</div>
<div id="risk-tolerance" class="btn-group" role="group" aria-label="Basic example">
<div class="input-group-prepend">
<span class="input-group-text" id="addon-wrapping">Risk Tolerance (select one)</span>
</div>
<button name="risk-tolerance" value="very-high" type="button" class="btn btn-secondary">Very High</button>
<button name="risk-tolerance" value="high" type="button" class="btn btn-secondary"> High </button>
<button name="risk-tolerance" value="medium" type="button" class="btn btn-secondary"> Medium </button>
<button name="risk-tolerance" value="low" type="button" class="btn btn-secondary"> Low </button>
<button name="risk-tolerance" value="very-low" type="button" class="btn btn-secondary"> Very Low</button>
</div>
<p> </p>
</form>
我认为您误解了文档。按钮是按钮没有办法表明它们是否被选中，因为它们不是输入。从您的文档链接
使用我们的按钮插件添加可选的JavaScript单选框和复选框样式行为。
如果您将其从按钮转换为输入，它将按预期工作。(注意：使用引导程序时堆栈片段不太好(
为了澄清，按钮组是一种设计，而不是一种功能。实际上，您需要将输入用作复选框，或者更可能是单选框。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<form method=”POST”>
<div id="friendly" class="btn-group" role="group" aria-label="Basic example">
<div class="input-group-prepend">
<span class="input-group-text" id="addon-wrapping">ESG Consideration (select one)</span>
</div>
<label class="btn btn-secondary">
<input name="friendly" value="very-high" type="radio">Very High
</label>
<label class="btn btn-secondary">
<input name="friendly" value="high" type="radio"> High
</label>
<label class="btn btn-secondary">
<input name="friendly" value="medium" type="radio"> Medium
</label>
<label class="btn btn-secondary">
<input name="friendly" value="low" type="radio"> Low
</label>
<label class="btn btn-secondary">
<input name="friendly" value="very-low" type="radio"> Very Low
</label>
</div>
<div id="risk-tolerance" class="btn-group" role="group" aria-label="Basic example">
<div class="input-group-prepend">
<span class="input-group-text" id="addon-wrapping">Risk Tolerance (select one)</span>
</div>
<label class="btn btn-secondary">
<input name="risk-tolerance" value="very-high" type="radio">Very High
</label>
<label class="btn btn-secondary">
<input name="risk-tolerance" value="high" type="radio"> High
</label>
<label class="btn btn-secondary">
<input name="risk-tolerance" value="medium" type="radio"> Medium
</label>
<label class="btn btn-secondary">
<input name="risk-tolerance" value="low" type="radio"> Low
</label>
<label class="btn btn-secondary">
<input name="risk-tolerance" value="very-low" type="radio"> Very Low
</label>
</div>
<p> </p>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>