使用Bootstrap Switch插件的滑动checkbox

来源：互联网发布：java 双引号转义编辑：程序博客网时间：2024/06/06 03:04

1.下载相应的插件

bootstrap

bootstrap-switch

使用到如下的部分

2.yw.js

$(function($) {$("#switch-state").bootstrapSwitch("state");$("#switch-state2").bootstrapSwitch("state");$("#test").click(function() {return alert($("#switch-state").bootstrapSwitch("state"));});$("#test2").click(function() {return alert($("#switch-state2").bootstrapSwitch("state"));});});

3.html

<!DOCTYPE html><html><head><title>MyHtml.html</title><meta name="keywords" content="keyword1,keyword2,keyword3"><meta name="description" content="this is my page"><meta name="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/bootstrap-switch.css"><script src="js/jquery-2.2.1.js"></script><script src="js/bootstrap.min.js"></script><script src="js/bootstrap-switch.js"></script><script src="js/yw.js"></script></head><body><div class="container"><!-- <div class="row"> --><h2 class="h4">bootstrap-switch plugin test01--by yw</h2><input id="switch-state" checked="" type="checkbox"> <br/><button type="button" class="btn btn-default" id="test">test</button><br/><input id="switch-state2" checked="" type="checkbox"><br/><button type="button" class="btn btn-default" id="test2">test2</button></div></body></html>

4.效果

0 0