Twitter引导按钮组控制单选按钮/复选框

Question

我试图使用Twitter Bootstrap按钮组作为一组实际的表单输入控件.默认情况下,可以使这些按钮组的功能类似于单选按钮或复选框组,但由于它们使用该<button>元素,因此它们实际上不能像单选按钮或复选框一样使用.

在我的研究中,我发现这个使用CSS的网站使这些引导按钮实际上控制了单选按钮和复选框.唯一的问题是他们使用相当新的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>

有关更多信息,请参阅相关的Bootstrap文档.

Bootstrap 4

Bootstrap 4 支持与Bootstrap 3相同的组件,但Bootstrap 4 不支持IE9.您可能想查看Bootstrap IE8项目.

Answer 2

Bootstrap 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服务器端