Question

我试图让我的单选按钮看起来更“时尚”使用引导程序，我无法弄清楚如何用bootstrap的glyphicon取消选中切换股票单选按钮，然后将其切换为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小提琴：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;
}

如何使用glyphicon切换单选按钮

1 个答案: