如何用字形图标切换单选按钮

Question

我正在尝试使用 bootstrap 让我的单选按钮看起来更 "stylish"，但我不知道如何使用 bootstrap 关闭常用单选按钮glyphicon-unchecked，然后在单击时将其切换为 glyphicon-checked，就像普通的单选按钮一样。这是我的代码...

        <div class="first-draft view">
            <h4>First-Draft</h4>
            <img src="img/view.png" alt="City View"/>
            <h5><span class="glyphicon glyphicon-file"> View Report</span></h5>
            <h6><span class="glyphicon glyphicon-unchecked"> Compare</span></h6>
        </div>

我曾尝试寻找不同的解决方案，但一无所获。这可能吗？

Answer 1

使用单选按钮：http://getbootstrap.com/javascript/#buttons-checkbox-radio

JS Fiddle: https://jsfiddle.net/DTcHh/6561/

   <div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> <span class="glyphicon glyphicon-unchecked unchecked"></span> <span class="glyphicon glyphicon-check checked"></span>
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> <span class="glyphicon glyphicon-unchecked unchecked"></span> <span class="glyphicon glyphicon-check checked"></span>
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> <span class="glyphicon glyphicon-unchecked unchecked"></span> <span class="glyphicon glyphicon-check checked"></span>
  </label>
</div>

CSS:

.checked{
    display:none;
}
.active .checked {
    display:inline-block;
}
.active .unchecked {
    display:none;
}

如何用字形图标切换单选按钮

How to switch a radio button out with a glyphicon

button

radio

twitter-bootstrap