$('.checked-by-js').prop('checked', true); //check input with jQuery $('#states-1 input[type="checkbox"]').simpleBtChecks();
$('#sizes-1 input[type="checkbox"]').simpleBtChecks();//default size is 'default' $('#sizes-2 input[type="checkbox"]').simpleBtChecks({ size: "x-2" }); $('#sizes-3 input[type="checkbox"]').simpleBtChecks({ size: "x-3" });
You can pass any class, but we recommend at least 'btn' bootstrap class. Default classes: 'btn btn-default'
$('.color_1 input[type="checkbox"]').simpleBtChecks({ size: "x-2" }); // default bt class: 'btn btn-default' $('.color_2 input[type="checkbox"]').simpleBtChecks({ size: 'x-2', class : 'btn btn-primary' }); $('.color_3 input[type="checkbox"]').simpleBtChecks({ size: 'x-2', class : 'btn btn-success' }); $('.color_4 input[type="checkbox"]').simpleBtChecks({ size: 'x-2', class : 'btn btn-info' }); $('.color_5 input[type="checkbox"]').simpleBtChecks({ size: 'x-2', class : 'btn btn-warning' }); $('.color_6 input[type="checkbox"]').simpleBtChecks({ size: 'x-2', class : 'btn btn-danger' }); $('.color_7 input[type="checkbox"]').simpleBtChecks({ size: 'x-2', class : 'btn btn-link' });
onLoadSbtc beforeChange - is checked? afterChange - is checked?
$('#events-1 input[type="checkbox"]').simpleBtChecks({ size: "x-2", icon: "glyphicon glyphicon-heart-empty", onLoadSbtc : function(newNodeElement, index){ console.log('function onLoadSbtc - newNodeElement:'); console.log(newNodeElement); $('#out-ev').text( 'Open js console :P - Input number: ' + index); }, beforeChange : function (isChecked, nodeElement){ $('#out-ev-1').text(isChecked); }, afterChange : function (isChecked, nodeElement){ $('#out-ev-2').text(isChecked); if (isChecked) nodeElement.addClass('btn-success').removeClass('btn-danger'); else nodeElement.addClass('btn-danger').removeClass('btn-success'); } });
Only by css :D fantasy-example.css
For more inspiration visit: Codrops example
//basic init $('#customize-1 input[type="checkbox"]').simpleBtChecks({ class: "btn btn-fantasy" //add button custom class css });
//default options $('input[type="checkbox"]').simpleBtChecks ({ size: "default", class: "btn btn-default", icon : "glyphicon glyphicon-ok", onLoadSbtc : null, beforeChange : null, afterChange : null }); //equivalent of $('input[type="checkbox"]').simpleBtChecks();
Really? ok e_e Necessary libs:
<button type="button" class="sbtc-btn btn btn-default sbtc-default"> <span class="sbtc-icon glyphicon glyphicon-ok "> </span> </button>