Twitter Bootstrap 按钮组控制单选按钮/复选框

Posted 2023-02-22

【中文标题】Twitter Bootstrap 按钮组控制单选按钮/复选框

【英文标题】：Twitter Bootstrap Button Group Control Radio Buttons/Checkboxes

【发布时间】：2013-02-28 04:34:11

【问题描述】：

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

在我的研究中，我发现this site 使用 CSS 使这些引导按钮实际控制单选按钮和复选框。唯一的问题是它们使用了 CSS 的最新特性来工作，因此需要 IE9 或更高版本才能工作。

我想扩展对 IE8 的支持。是否有另一种（可能是 JS 控制的）解决方案可以提供与上述链接相同的功能，而无需严格的 CSS 要求？

感谢您的宝贵时间。

【问题讨论】：

they cannot actually be used like a radio button or checkbox. 是什么意思？他们的Radio 演示只允许“检查”一个

@Eonasdan 如果您尝试将表单内容提交到服务器，因为它们不是实际的单选按钮或复选框，您的选择将不会发送到服务器进行处理。

@spyrno724 你看到我的回答了吗？

【参考方案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>

更多信息请参见the relevant Bootstrap documentation。

引导程序 4

Bootstrap 4 supports component the same way as Bootstrap 3，但 Bootstrap 4 does not support IE9。您可能想查看Bootstrap IE8 项目。

【讨论】：

我在生产中遇到了很多关于这段代码的问题，因为有时即使选中了默认选项，“选项”的值也会在服务器端留空。它归结为这样一个事实，即输入有时没有得到选中的属性，或者错误的输入得到了选中的属性。我完全不知道错误的重现性，但数据库不会说谎。

@JasonParham 使用后退按钮时，btn 的活动状态与输入的选中状态不匹配。我这样做是为了补偿： $(':input:checked').parent('.btn').addClass('active').siblings().removeClass("active");

这有一些大问题，尝试使用 Tab 然后空格键来切换输入。提交表单时，这些更改不会回发。 Bootstrap 3.3.5 已修复此问题。以为我会让人们知道，这样他们就不会浪费数小时的时间来修复它。这是在修复 #16226 和 #16404 中。

【参考方案2】：

引导程序 2

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

【讨论】：

链接断开@Eon

【参考方案3】：

使用 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>

现在在模板的 onload 部分插入一点 javascript sn-p。

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

因此您只需将 .checkit 添加到您的按钮组并插入一个隐藏的输入字段。

使用 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>

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

【参考方案4】：

您可以使用隐藏的表单元素和javascript来使用按钮状态来触发表单元素状态。

【讨论】：

没错，我只是想知道是否有人已经处理好了。

【参考方案5】：

纯 CSS 解决方案：

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：

 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 here

【参考方案6】：

如果你不想添加 JS 代码，你可以使用这个纯 CSS 解决方案：

HTML：

<div class="btn-group colors">
  <label class="btn btn-primary">
    <input type="radio" name="g1" value="red" autocomplete="off" checked> 
    <span class='active'></span>
    <span class='label'>RED</span>
    <span></span>
  </label>

  <label class="btn btn-primary">
    <input type="radio" name="g1" value="orange" autocomplete="off"> 
    <span class='active'></span>
    <span class='label'>ORANGE</span>
  </label>

  <label class="btn btn-primary">
    <input type="radio" name="g1" value="yellow" autocomplete="off"> 
    <span class='active'></span>
    <span class='label'>YELLOW</span>
  </label>
</div>

CSS：

input 
  display:none;


input:checked + .active
    background-color: #ff0000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:10;


.label
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;

您可能需要在 CSS 中为按钮设置高度和宽度，因为跨度是绝对定位的。

请看这里JSFiddle example