styled bootstrap radio buttons not clickable in browser - html

Question

I'm trying to make these radio buttons clickable in the browser. I found an example at this link here but the same implementation isn't working in my browser, nor here in the snippet. The change color when moused over, and get darker again when depress, but they don't retain that information or display a check mark like they do in the example I found.
What's missing here?
.btn span.glyphicon {
opacity: 0;
}
.btn.active span.glyphicon {
opacity: 1;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="well well-sm text-center">
<h3>Radio</h3>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success" for="option1" active">
<input type="radio" name="options" id="option1" autocomplete="off" chacked>
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-primary" for="option2">
<input type="radio" name="options" id="option2" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-info" for="option3">
<input type="radio" name="options" id="option3" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-default" for="option4">
<input type="radio" name="options" id="option4" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-warning" for="option5">
<input type="radio" name="options" id="option5" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-danger" for="option6">
<input type="radio" name="options" id="option6" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
</div>
</div>
</div>

Answer 1

you didnt have the bootstrap js file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
.btn span.glyphicon {
opacity: 0;
}
.btn.active span.glyphicon {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h1 class="text-center">Checkbox/Radio - CSS Only</h1>
</div>
<div class="container">
<div class="well well-sm text-center">
<h3>Checkbox</h3>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success active">
<input type="checkbox" autocomplete="off" checked />
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-info">
<input type="checkbox" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-default">
<input type="checkbox" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-warning">
<input type="checkbox" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-danger">
<input type="checkbox" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
</div>
</div>
</div>
<div class="container">
<div class="well well-sm text-center">
<h3>Radio</h3>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success active">
<input type="radio" name="options" id="option2" autocomplete="off" chacked/>
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option1" autocomplete="off"/>
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-info">
<input type="radio" name="options" id="option2" autocomplete="off"/>
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" autocomplete="off"/>
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-warning">
<input type="radio" name="options" id="option2" autocomplete="off"/>
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-danger">
<input type="radio" name="options" id="option2" autocomplete="off"/>
<span class="glyphicon glyphicon-ok"></span>
</label>
</div>
</div>
</div>

Answer 2

Its a class of btn-group which requires the javascript to be imported as well. It is basically this with style.