Twitter Bootstrap 按钮组控制单选按钮/复选框

Question

我正在尝试将 Twitter Bootstrap 按钮组 用作一组实际的表单输入控件。默认情况下，这些按钮组可以用作单选按钮或复选框组，但由于它们使用 <button> 元素，它们实际上不能用作单选按钮或复选框。

在我的研究中，我发现 这个网站 使用 CSS 使这些引导按钮实际上控制单选按钮和复选框。唯一的问题是它们使用 CSS 的最新特性来工作，因此需要 IE9 或更高版本才能工作。

我想扩展对 IE8 的支持。是否有另一种（可能是 JS 控制的）解决方案可以提供与上述链接相同的功能，而没有严格的 CSS 要求？

感谢您的时间。

原文由 Oliver Spryn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Bootstrap 3 有一个“本地”解决方案……

这个问题现在有一个“真正的”引导程序解决方案，它似乎在旧浏览器上也能正常工作。这是它的样子：

 // get selection
$('.colors input[type=radio]').on('change', function() {
    console.log(this.value);
});

 <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="btn-group colors" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" value="red" autocomplete="off" checked> Red
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" value="orange" autocomplete="off"> Orange
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" value="yellow" autocomplete="off"> Yellow
  </label>
</div>

<!-- jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

有关详细信息，请参阅 相关的 Bootstrap 文档。

引导程序 4

Bootstrap 4 对组件的支持方式与 Bootstrap 3 相同，但 Bootstrap 4 不支持 IE9 。您可能想查看 Bootstrap IE8 项目。

原文由 maciek 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

引导程序 2

试试 这个小提琴

HTML:

 <div class="btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>
<input type="hidden" id="buttonvalue"/>

脚本：

 $(".btn-group button").click(function () {
    $("#buttonvalue").val($(this).text());
});

然后得到 buttonvalue 服务器端

原文由 Eonasdan 发布，翻译遵循 CC BY-SA 3.0 许可协议