Html Twitter Bootstrap 按钮组控制单选按钮/复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15365028/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap Button Group Control Radio Buttons/Checkboxes
提问by Oliver Spryn
I am trying to use the Twitter Bootstrap button groupas 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.
我正在尝试使用Twitter Bootstrap 按钮组作为一组实际的表单输入控件。默认情况下，这些按钮组可以用作单选按钮或复选框组，但由于它们使用<button>元素，因此实际上不能像单选按钮或复选框那样使用。
In my research, I found this sitewhich 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.
在我的研究中，我发现这个网站使用 CSS 使这些引导按钮实际上控制单选按钮和复选框。唯一的问题是他们使用相当新的 CSS 特性来工作，因此，需要 IE9 或更高版本才能工作。
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?
我想扩展对 IE8 的支持。是否有另一种（可能是 JS 控制的）解决方案可以提供与上述链接相同的功能而没有严格的 CSS 要求？
Thank you for your time.
感谢您的时间。
回答by maciek
Bootstrap 3 has a "native" solution...
Bootstrap 3 有一个“原生”解决方案......
There now is a "true" Bootstrap solution for this problem, which appears to work fine also on older browsers. Here's what it looks like:
现在有一个“真正的”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>See the relevant Bootstrap documentationfor more information.
有关更多信息，请参阅相关的 Bootstrap 文档。
Bootstrap 4
引导程序 4
Bootstrap 4 supports component the same way as Bootstrap 3, but Bootstrap 4 does not support IE9. You might want to check out the Bootstrap IE8project.
Bootstrap 4支持组件的方式与 Bootstrap 3 相同，但 Bootstrap 4不支持 IE9。您可能想查看Bootstrap IE8项目。
回答by Eonasdan
Bootstrap 2
引导程序 2
Try this fiddle
试试这个小提琴
HTML:
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"/>
Script:
脚本：
$(".btn-group button").click(function () {
$("#buttonvalue").val($(this).text());
});
then get buttonvalueserver side
然后得到buttonvalue服务器端
回答by RubbelDeCatc
With Bootstrap 3.2 put the hidden input in the middle of your button group container. Instead of the text content we take the value of th data-value field.
使用 Bootstrap 3.2 将隐藏的输入放在按钮组容器的中间。我们取数据值字段的值而不是文本内容。
<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>
Now insert a little javascript snippet into the onload part of your template.
现在在模板的 onload 部分插入一个小 javascript 片段。
$('.checkit .btn').click(function() {
$(this).parent().find('input').val($(this).data("value"));
});
So you only need to add .checkit to your button group and insert a hidden input field.
因此，您只需将 .checkit 添加到您的按钮组并插入一个隐藏的输入字段。
With bootstrap 3.2 you can use button groups directly with radio- or checkbox-inputs
使用 bootstrap 3.2，您可以直接使用带有单选或复选框输入的按钮组
<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>
回答by oboshto
CSS-only solution:
仅 CSS 解决方案：
HTML:
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/LESS:
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;
}
}
回答by BahamutWC
You can use hidden form elements and javascript to use the button state to trigger the form element states.
您可以使用隐藏的表单元素和 javascript 来使用按钮状态来触发表单元素状态。
