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

Question

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

在我的研究中，我发现这个网站使用CSS使这些Bootstrap按钮实际上控制单选按钮和复选框。唯一的问题是他们使用了较新的CSS功能来工作，因此需要IE9或更高版本才能运行。

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

感谢您的时间。

- Oliver Spryn

---

你是什么意思说“它们实际上不能像单选按钮或复选框一样使用”？他们的“Radio”演示只允许一个被“选中”。 - Eonasdan

如果您尝试将表单内容提交到服务器，由于它们不是实际的单选按钮或复选框，您的选择将不会被发送到服务器进行处理。 - Oliver Spryn

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

Answer 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>

请查看相关的Bootstrap文档以获取更多信息。

Bootstrap 4

Bootstrap 4 支持组件的方式与Bootstrap 3相同,但Bootstrap 4 不支持IE9。您可能需要查看Bootstrap IE8项目。

- maciek

---

我在生产环境中遇到了许多问题，因为有时服务器端会将“选项”留空，即使默认选项已被选中。这归结于输入有时无法获得选中属性或错误的输入获得了选中属性。我完全不知道错误的可重现性，但数据库不会撒谎。 - Jason Parham

当使用"返回"按钮时，按钮的激活状态与输入框的选中状态不匹配。我做了以下调整：$(':input:checked').parent('.btn').addClass('active').siblings().removeClass("active");。 - Maarten

使用Tab键和空格键来切换输入框存在一些问题，当表单提交时，这些更改并不会被保存。Bootstrap 3.3.5已经解决了这个问题。我想让大家知道这一点，以免浪费数小时来修复它。此更改在#16226和#16404中得到修复。 - astrosteve

Answer 2

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

- Eonasdan

---

链接损坏 @Eon - selvakumar

Answer 3

在Bootstrap 3.2中，将隐藏输入放置在按钮组容器的中间。我们使用data-value字段的值代替文本内容。

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

现在将一个小的javascript片段插入到您模板的onload部分中。

$('.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/

- RubbelDeCatc

Answer 4

CSS-only解决方案：

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;
    }
  }

{{链接1：在这里查看JSfiddle}}

- oboshto

Answer 5

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

- BahamutWC

---

没错，我只是想知道是否已经有人处理过这个问题了。 - Oliver Spryn

Answer 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;
}

由于这些span被绝对定位，因此您可能需要在CSS中为按钮设置高度和宽度。

请参见此处JSFiddle示例

- Florin R