<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row text-center">
<br>
<br>
<h1>Badgebox: CSS only checkbox badge!</h1>
<h2>Works on Bootstrap 2.3.2 and up</h2>
<br>
<button id="isso"> Click!</button>
<br>
<label for="default" class="btn btn-default">Default <input type="checkbox" id="default" class="badgebox"><span class="badge">✓</span></label>
<label for="primary" class="btn btn-primary">Primary <input type="checkbox" id="primary" class="badgebox"><span class="badge">✓</span></label>
<label for="info" class="btn btn-info">Info <input type="checkbox" id="info" class="badgebox"><span class="badge">✓</span></label>
<label for="success" class="btn btn-success">Success <input type="checkbox" id="success" class="badgebox"><span class="badge">✓</span></label>
<label for="warning" class="btn btn-warning">Warning <input type="checkbox" id="warning" class="badgebox"><span class="badge">✓</span></label>
<label for="danger" class="btn btn-danger">Danger <input type="checkbox" id="danger" class="badgebox"><span class="badge">✓</span></label>
<hr />
<div class="btn-group-vertical btn-group-xs" id="lista-opt-utils">
<label for="default2" class="btn btn-primary righter">Default: <input type="checkbox" id="default2" class="badgebox"><span class="badge">✓</span></label>
<label for="primary2" class="btn btn-default righter">Primary: <input type="checkbox" id="primary2" class="badgebox"><span class="badge">✓</span></label>
<label for="info2" class="btn btn-default righter">Info: <input type="checkbox" id="info2" class="badgebox"><span class="badge">✓</span></label>
<label for="success2" class="btn btn-default righter">Success: <input type="checkbox" id="success2" class="badgebox"><span class="badge">✓</span></label>
<label for="warning2" class="btn btn-default righter">Warning: <input type="checkbox" id="warning2" class="badgebox"><span class="badge">✓</span></label>
<label for="danger2" class="btn btn-default righter">Lots of stupid Danger: <input type="checkbox" id="danger2" class="badgebox"><span class="badge">✓</span></label>
<div>
</div>
</div>
/* Hiding the checkbox, but allowing it to be focused */
.badgebox {
/* hide standard checkbox square */
opacity: 0;
}
.righter {
/* badge should be on right! */
text-align:right ;
}
.badgebox + .badge {
/* if bigger btns, use width:27px, maybe*/
width: 20px;
color: rgba(0, 0, 0, 0);
}
.badgebox:focus + .badge
{
/* Set something to make the badge looks focused */
/* ...for instance: adding a light border: */
box-shadow: inset 0px 0px 5px;
/* Taking the difference out of the padding */
}
.badgebox:checked + .badge
{
/* when checked, make it invisible */
color: rgba(1, 1, 1, 1);
}
.btn-default .badgebox:checked + .badge
{
color:white;
}
$(document).ready(function(){
$("#lista-opt-utils").change(function(event) {
var thatBtn = event.target.id;
console.log("Field " + thatBtn + "is checked?" + $("#"+thatBtn).is(":checked") );
});
$("#isso").click( function() { console.log("O danger2 status: ", $("#danger2").is(":checked") ) } )
/*
$("input").change( function() {
console.log (this.id)
});
*/
});
$("#ynCalculos").change( function(){ f( $(this),$("td.mc, td.sc") ) });
function f(thatBtn, thoseClasses){
if ( thatBtn.is(":checked","true") ) {
$(thoseClasses).removeClass("oculta");
} else {
$(thoseClasses).addClass("oculta");
}
} ;