bootstrap-switch中怎么设置初始值

发布时间:2021-07-23 14:11:15 作者:Leah
来源:亿速云 阅读:129

今天就跟大家聊聊有关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中怎么设置初始值有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。

推荐阅读:
  1. C++11 初始值{}与()的区别
  2. Python的类成员变量默认初始值的坑

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

上一篇:tensorflow saver如何实现保存和恢复指定tensor

下一篇:基于vue.js路由参数的示例分析

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》