bootstrap-switch中怎么设置初始值

今天就跟大家聊聊有关bootstrap-switch中怎么设置初始值,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

首先,引用相应的js和css文件,把checkbox放进class为“switch”的div中,再在js中初始化

 $('#mySwitch input').bootstrapSwitch();

就可以使用bootstrapSwitch了。

其中input有两个属性 data-on-text data-off-text,分别为切换时显示的文字,这里设置为YES和NO。代码如下:

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>this is a bootstrap-switch test</title>    <script src="jquery-2.2.4.js"></script>    <script src="bootstrap.js"></script>    <script src="bootstrap-switch.js"></script>    <link rel="stylesheet" type="text/css" href="bootstrap.css"/>    <link rel="stylesheet" type="text/css" href="bootstrap-switch.css"/>     <script type="text/javascript">        $(function(){            $('#mySwitch input').bootstrapSwitch();        })    </script></head><body> <div id="mySwitch"> <input type="checkbox" checked data-on-text="YES" data-off-text="NO"/> </div></body></html>

也可以用js设置这两个属性,选中input元素后,通过方法bootstrapSwitch({attribute:value}) 修改属性。代码如下:

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>this is a bootstrap-switch test</title>    <script src="jquery-2.2.4.js"></script>    <script src="bootstrap.js"></script>    <script src="bootstrap-switch.js"></script>    <link rel="stylesheet" type="text/css" href="bootstrap.css"/>    <link rel="stylesheet" type="text/css" href="bootstrap-switch.css"/>    <script type="text/javascript">        $(function(){            $('#mySwitch input').bootstrapSwitch({                onText:'On',                offText:'Off'            });        })    </script></head><body><br><div  id="mySwitch">    <input type="checkbox" checked  data-on-text="YES" data-off-text="NO"/></div></body>

看完上述内容,你们对bootstrap-switch中怎么设置初始值有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。