"Badgebox: CSS checkbox badge"
Bootstrap 3.3.0 Snippet by zotalegre

<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">&check;</span></label> <label for="primary" class="btn btn-primary">Primary <input type="checkbox" id="primary" class="badgebox"><span class="badge">&check;</span></label> <label for="info" class="btn btn-info">Info <input type="checkbox" id="info" class="badgebox"><span class="badge">&check;</span></label> <label for="success" class="btn btn-success">Success <input type="checkbox" id="success" class="badgebox"><span class="badge">&check;</span></label> <label for="warning" class="btn btn-warning">Warning <input type="checkbox" id="warning" class="badgebox"><span class="badge">&check;</span></label> <label for="danger" class="btn btn-danger">Danger <input type="checkbox" id="danger" class="badgebox"><span class="badge">&check;</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">&check;</span></label> <label for="primary2" class="btn btn-default righter">Primary: <input type="checkbox" id="primary2" class="badgebox"><span class="badge">&check;</span></label> <label for="info2" class="btn btn-default righter">Info: <input type="checkbox" id="info2" class="badgebox"><span class="badge">&check;</span></label> <label for="success2" class="btn btn-default righter">Success: <input type="checkbox" id="success2" class="badgebox"><span class="badge">&check;</span></label> <label for="warning2" class="btn btn-default righter">Warning: <input type="checkbox" id="warning2" class="badgebox"><span class="badge">&check;</span></label> <label for="danger2" class="btn btn-default righter">Lots of stupid Danger: <input type="checkbox" id="danger2" class="badgebox"><span class="badge">&check;</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"); } } ;

Related: See More


Questions / Comments: