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

Question

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

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

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

感谢您的宝贵时间。

Answer 1

Bootstrap 3 有一个“原生”解决方案...

对于这个问题现在有一个“真正的”Bootstrap 解决方案，它似乎在旧版浏览器上也能正常工作。这是它的样子:

// 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>

参见 the relevant Bootstrap documentation获取更多信息。

Bootstrap 4

Bootstrap 4 supports component the same way as Bootstrap 3 , 但 Bootstrap 4 does not support IE9 .您可能想查看 Bootstrap IE8元素。