Javascript Twitter引导按钮组控制单选按钮/复选框

我正在尝试将作为一组实际的表单输入控件使用。默认情况下，这些按钮组的功能类似于单选按钮或复选框组，但由于它们使用

元素，因此实际上不能像单选按钮或复选框那样使用

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

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

---

谢谢您的时间。

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

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

然后获取

按钮值

服务器端

Bootstrap 3有一个“本机”解决方案…

对于这个问题，现在有了一个“真正的”引导解决方案，它似乎在较旧的浏览器上也能正常工作。下面是它的样子：

//获取选择
$（'.colors输入[type=radio]'）。在（'change'，function（）上{
console.log（this.value）；
});

红色
橙色
黄色的
用Bootstrap 3.2将隐藏的输入放在按钮组容器的中间。我们取数据值字段的值，而不是文本内容

对
不

现在在模板的onload部分插入一个小javascript片段

$（'.checkit.btn'）。单击（函数（）{
$（this.parent（）.find（'input'）.val（$（this.data（“value”））；
});

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

使用Bootstrap3.2，您可以直接使用单选或复选框输入的按钮组


对
不
无论什么

请看这里：
CSS唯一解决方案：

HTML:

什么意思
它们实际上不能像单选按钮或复选框那样使用。
？他们的
单选
演示只允许“选中”一个@Eonasdan如果您尝试将表单内容提交给服务器，因为它们不是实际的单选按钮或复选框，您的选择将不会发送到服务器进行处理。@spyrno724您看到我的答案了吗？是，我只是想知道是否有人已经注意到了这一点。在生产过程中，我对这段代码有很多问题，因为有时即使选中了默认选项，服务器端的“选项”值也会留空。它归结为这样一个事实：输入有时没有得到checked属性，或者错误的输入得到checked属性。我完全不知道错误的再现性，但数据库没有撒谎。@JasonParham使用“后退”按钮时，btn的活动状态与输入的已检查状态不匹配。我这样做是为了补偿：$（':input:checked'）.parent（'.btn'）.addClass（'active'）.sides（）.removeClass（“active”）；这有一些大问题，尝试使用Tab键，然后使用空格键来切换输入。提交表单时，这些更改不会回发。Bootstrap 3.3.5已修复此问题。我想我应该让人们知道，这样他们就不会浪费时间去修复它了。这是修复中的#16226和#16404。链接已断开@Eon
<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>

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