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="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在这里
