Question

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

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

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

感谢您的时间。

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>

有关详细信息，请参阅the relevant Bootstrap documentation。

Bootstrap 4

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

Answer 2

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

Answer 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代码段。

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

Answer 4

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

Answer 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

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

5 个答案: