Bootstrap uncheck checkbox and style

Question

I have 3 Buttons / checkboxes, if I click on any it gets checked, how do I make all other Buttons uncheck if I click on the current one.

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 ?
});

Possible duplicate of [Setting "checked" for a checkbox with jQuery?](http://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery) — Micheasl, Apr 06 '17 at 10:32

score 0 · Answer 1 · answered Apr 06 '17 at 10:12

0

You should really use radio buttons for this, not checkboxes, and style them to look like checkboxes (if you prefer that look). So instead of

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

Just use

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

And make sure all radios have the same name attribute.

answered Apr 06 '17 at 10:12

l.varga

851
6
14

Thanks somehow forgot that – Micheasl Apr 06 '17 at 10:16
You did not add the 'name' attribute. As said in the answer, for it to work, you should add the 'name' attribute to all of the radios and the name should be identical. So just add name="foo" or name="checkbox-style" or whatever, to all of the radios. If the answer is helpful, please mark it as such. – l.varga Apr 06 '17 at 10:18

score 0 · Answer 2 · answered Apr 06 '17 at 10:19

/* 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>

Bootstrap uncheck checkbox and style

2 Answers2