bootstrap-switch中怎么設(shè)置初始值

發(fā)布時間：2021-07-23 14:11:15 來源：億速云閱讀：129 作者：Leah 欄目：開發(fā)技術(shù)

今天就跟大家聊聊有關(guān)bootstrap-switch中怎么設(shè)置初始值，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

首先，引用相應(yīng)的js和css文件，把checkbox放進(jìn)class為“switch”的div中，再在js中初始化

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

就可以使用bootstrapSwitch了。

其中input有兩個屬性 data-on-text 和data-off-text，分別為切換時顯示的文字，這里設(shè)置為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設(shè)置這兩個屬性，選中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>

看完上述內(nèi)容，你們對bootstrap-switch中怎么設(shè)置初始值有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問一下細(xì)節(jié)

bootstrap-switch中怎么設(shè)置初始值

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽