Question

我正在使用Bootstrap 3中的javascipt单选按钮

http://getbootstrap.com/javascript/#buttons

HTML：

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="radio" name="options" id="option1" checked> Option 1 (preselected)
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2"> Option 2
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3"> Option 3
    </label>
</div>

使用Javascript：

$('.btn').button()

只有当“.btn”类具有“活动”类时才需要附加它：

 <span class="glyphicon glyphicon-ok"></span>

获取

<label class="btn btn-primary active">
    <span class="glyphicon glyphicon-ok"></span><!-- appended markup -->
    <input type="radio" name="options" id="option1" checked> Option 1 (preselected)
  </label>

有人可以帮忙吗？

谢谢

Answer 1

如何在普通的'ole CSS中这样做：

<强> CSS：

.add-check .active:before {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e013";
}

HTML：（我只在按钮组中添加了一个类.add-check，以便您可以定位特定的类。）

<div class="btn-group add-check" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="radio" name="options" id="option1" checked> Option 1 (preselected)
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2"> Option 2
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3"> Option 3
    </label>
</div>

DEMO

Answer 2

你知道，只是把一个纯粹的CSS解决方案投入到混合中以获取它：

.active-display-only { display:none; }
.active > .active-display-only { display:inline-block; }

然后，将glyphicon放在每个按钮中：

<label class="btn btn-primary">
    <span class="glyphicon glyphicon-ok active-display-only"></span>
    <input type="radio" name="options" id="option1" checked> Option 1 (preselected)
</label>

Answer 3

你可以添加一些jQuery魔法，让它做你想做的事。我这样做只需在HTML中添加以下元素，但使用hide类将其隐藏起来，直到需要它为止。

HTML：

<label id="tester" class="btn btn-primary active">
    <span id="test" class="glyphicon glyphicon-ok hide"></span>
    <input type="radio" name="options" class="option1" checked>Option 1 (preselected)
</label>

jQuery的：

$('#tester').on('click', function () {
    $('#test').removeClass('hide');
    $('#test2').addClass('hide');
    $('#test3').addClass('hide');
});

在单击标签的情况下，跨度将删除hide类，从而在将类添加到其他两个输入时显示复选标记。这应该适合你，我建议改变名称方案。下面是一个例子。

<强> DEMO

修改

我更新了小提琴，以便预先选择的选项会自动以复选标记开始，希望能够创建您正在寻找的体验。

Bootstrap单选按钮在激活时附加标记

3 个答案:

DEMO