Twitter引导button组控制单选button/checkbox

我正在尝试使用Twitter Bootstrapbutton组作为一组实际的表单input控件。 默认情况下,可以使这些button组像单选button或checkbox组一样工作,但是由于它们使用<button>元素,所以它们实际上不能像单选button或checkbox那样使用。

在我的研究中,我发现这个网站使用CSS来使这些引导button实际上控制单选button和checkbox。 唯一的问题是他们使用CSS的最近function工作,因此,需要IE9或以上的工作。

我想扩大对IE8的支持。 是否有另一个(也许是JS控制的)解决scheme,可以提供与上述链接相同的function,而不需要陡峭的CSS要求?

感谢您的时间。

Bootstrap 3有一个“原生”解决scheme…

现在有一个“真正的”Bootstrap解决scheme,这个问题似乎在旧版浏览器上也能正常工作。 以下是它的样子:

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

使用Bootstrap 3.2将隐藏的input放在button组容器的中间。 而不是文本内容,我们采取数据值字段的值。

 <div id="test" class="btn-group checkit" data-toggle="buttons-radio"> <button type="button" data-value="1" class="btn btn-default active">Yes</button> <input type='hidden' name="testfield" value='1'> <button type="button" data-value="0" class="btn btn-default ">No</button> </div> 

现在在你的模板的onload部分插入一个小的JavaScript代码片段。

 $('.checkit .btn').click(function() { $(this).parent().find('input').val($(this).data("value")); }); 

所以你只需要添加.checkit到你的button组,并插入一个隐藏的input字段。

使用引导程序3.2,您可以直接使用无线或checkboxinputbutton组

 <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input type="radio" name="options" id="option1" value="1" /> Yes </label> <label class="btn btn-default"> <input type="radio" name="options" id="option2" value="0" /> No </label> <label class="btn btn-default"> <input type="radio" name="options" id="option3" value="42" /> Whatever </label> </div> 

看到这里: http : //jsfiddle.net/DHoeschen/gmxr45hh/1/

您可以使用隐藏的表单元素和JavaScript来使用button状态来触发表单元素状态。

纯CSS解决scheme:

HTML:

 <div class="btn-group"> <label class="btn btn-primary"><input type="checkbox"><span>Button 1</span></label> <label class="btn btn-primary"><input type="checkbox"><span>Button 2</span></label> </div> 

SCSS /减:

  label.btn { margin-bottom: 0; padding: 0; overflow: hidden; span { display: block; padding: 10px 15px; } input[type=checkbox] { display: none; } input:checked + span { display: block; color: #fff; background-color: #285e8e; } } 

JSfiddle在这里