JSFiddle - React, Tailwind, and code Playground

by isherwood

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<label for="myCheckbox" class="glyphy">
    <input type="checkbox" id="myCheckbox" /> 
    <span class="glyphicon glyphicon-unchecked"></span>
    label words
</label>

CSS

.glyphy {
    cursor: pointer;
}
.glyphy input {
    display: none;
}
body {
    padding: 30px;
}

JavaScript

$('.glyphy').click(function (e) {
    if ($(e.target).is('input')) {
        $(this).find('.glyphicon').toggleClass('glyphicon-check glyphicon-unchecked');
        console.log( $(this).find('input').is(':checked') );
    }
});