Twitter Bootstrap按钮组控制单选按钮/复选框 [英] Twitter Bootstrap Button Group Control Radio Buttons/Checkboxes

问题描述

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

I am trying to use the Twitter Bootstrap button group as an actual set of form input controls. By default, these button groups can be made to function like a radio button or checkbox group, but since they use the <button> element, they cannot actually be used like a radio button or checkbox.

在我的研究中，我发现了这个网站使用CSS来使这些引导按钮实际上控制单选按钮和复选框。唯一的问题是他们使用CSS的最近的功能工作，因此，需要IE9或以上的工作。

In my research, I found this site which uses CSS to make these bootstrap buttons actually control radio buttons and checkboxes. The only issue is they use rather recent features of CSS to work, and therefore, require IE9 or above to work.

我想扩展支持到IE8。有没有另一个（也许JS控制）解决方案，将提供与上述链接相同的功能，没有陡峭的CSS要求？

I would like to extend support to IE8. Is there another (perhaps JS controlled) solution which would offer the same features as the above link without the steep CSS requirements?

谢谢您的时间。

推荐答案

Bootstrap 2

http://jsfiddle.net/Eonasdan/KFKBD/1\">这个小提示

Try this fiddle

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

这篇关于Twitter Bootstrap按钮组控制单选按钮/复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！