Bootstrap單選按鈕在活動時附加標記

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

編輯

我更新了小提琴，以便預先選擇的選項將自動以復選標記開頭，希望可以創建您想要的體驗。