<!DOCTYPE html> <html> <head> </head> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <link href="https://unpkg.com/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet"> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script src="https://unpkg.com/bootstrap-switch"></script> <body> <input type="checkbox" data-value="id" class="switch" /> data-on-text="open" ontext offtext size null, 'mini', 'small', 'normal', 'large' onColor offColor 'primary', 'info', 'success', 'warning', 'danger', 'default' </body> <script stype="javascript/text"> $(".switch").bootstrapSwitch({ onText: "Open", offText: "Close", onColor: "success", offColor: "primary", onSwitchChange: function(event, state) { console.log(this); // DOM element console.log(event); // jQuery event console.log(state); // true | false console.log($(this).data('value')); state=false; } }); $(".switch").bootstrapSwitch("size" ,"large").bootstrapSwitch('state',true);
</script> </html>