Bootstrap 取消选中复选框和样式

Question

我有 3 个按钮/复选框，如果我点击任何一个它会被选中，如果我点击当前一个，我如何让所有其他按钮取消选中。

https://jsfiddle.net/DTcHh/31573/

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default btn-lg no-border">
        <span id="btnPencil" class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
        <input type="checkbox" autocomplete="off">
    </label>
    <label class="btn btn-default btn-lg no-border">
        <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
        <input type="checkbox" autocomplete="off">
    </label>
    <label class="btn btn-default btn-lg no-border">
        <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
        <input type="checkbox" autocomplete="off">
    </label>
</div>

btnp = document.getElementById(btnPencil)

btnp.addEventListener('change', function() {
    // 1. check current button / checkbox
    // 2. uncheck other buttons / checkbox
    // bootstrap uncheck / check style ?
});

Answer 1

您真的应该为此使用单选按钮，而不是复选框，并将它们的样式设置为看起来像复选框（如果您更喜欢这种外观）。所以不是

<input type="checkbox" autocomplete="off">

随便用

<input type="radio" autocomplete="off" name="X">

并确保所有无线电具有相同的名称属性。

Answer 2

/* Latest compiled and minified JavaScript included as External Resource */

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

<div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default btn-lg no-border">
            <span id="btnPencil" class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            <input id="checkboxPencil" type="radio" autocomplete="off" name="menu">
        </label>
        
        <label class="btn btn-default btn-lg no-border">
            <span id="btnSquare" class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
            <input id="checkboxSquare" type="radio" autocomplete="off" name="menu">
        </label>
        
        <label class="btn btn-default btn-lg no-border">
            <span id="btnSquare" class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
            <input id="checkboxSquare2" type="radio" autocomplete="off" name="menu">
        </label>
    </div>