bootstrap 的开关。

引入相关文件:

<link href="https://cdn.bootcss.com/bootstrap-switch/4.0.0-alpha.1/css/bootstrap-switch.min.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/bootstrap-switch/4.0.0-alpha.1/js/bootstrap-switch.min.js"></script>

HTML代码:

<input type="checkbox" name="useState"/>

JavaScript代码:

$("[name='useState']").bootstrapSwitch({
size:"large",
onText:"启用",
offText:"禁用",
onColor:"success",
onSwitchChange:function(event,state){
if(state==true){
$(this).val("2");
}else{
$(this).val("1"); // 禁用
}
}
});

设置开或者关:

$('[name="useState"]').bootstrapSwitch("state", true);
// true 为 开,false 为 关

参考链接

bootstrap-switch使用的更多相关文章

  1. bootstrap switch功能

    bootstrap switch是一个按钮开关,点击时获取其状态可通过以下代码: <input id="email_switch_state" type="chec ...

  2. 前端插件之Bootstrap Switch 选择框开关控制

    简介 Bootstrap Switch是一款轻量级插件,可以给选择框设置类似于开关的样式 它是依赖于Bootstrap的一款插件 下载 下载地址 在线引用 导入 因为它是依赖于Bootstrap的一款 ...

  3. bootstrap switch样式修改与多列等间距布局

    先以一张图开启今天的随笔 今天实习遇到了switch按钮,小姐姐说用插件bootstrap switch来写,我第一次用这个插件,首先在引入方面就遇到了很多坑,先来总结一下bootstrap swit ...

  4. 前端基础(十):Bootstrap Switch 选择框开关控制

    简介 Bootstrap Switch是一款轻量级插件,可以给选择框设置类似于开关的样式 它是依赖于Bootstrap的一款插件 下载 下载地址 在线引用 导入 因为它是依赖于Bootstrap的一款 ...

  5. 使用jQuery获取Bootstrap Switch的值

    $('#switcher').bootstrapSwitch('state'); // true || false $('#switcher').bootstrapSwitch('toggleStat ...

  6. bootstrap Switch 的一个坑点

    在bootstrap的modal点开的时候改变bootstrapSwitch的状态的时候,会出现第一次打开modal,switch没有变化,第二次以后打开modal才会改变,这个问题找了好久没有找到答 ...

  7. Bootstrap switch 切换状态踩坑

    Boostrap switch 下载地址(http://www.bootcss.com/p/bootstrap-switch/),同时配有一些简单的用例. 其中写到 Toggle State切换状态的 ...

  8. 基于Bootstrap的jQuery开关按钮插件

        按钮 下载 使用方法 首先要在页面中引入依赖文件: jquery.Bootstrap.Bootstrap Switch CSS和Bootstrap Switch JS.这里用的是bootstr ...

  9. 基于Bootstrap的超酷jQuery开关按钮插件

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD

  10. Bootstrap相关优质项目推荐

    Bootstrap 编码规范by @mdo Bootstrap 编码规范:编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范. jQuery API 中文手册 根据最新的 jQuery 1.1 ...

随机推荐

  1. Linux-Bash终端快捷键

    ^C 终正在运行的进程或放弃当前编辑的命令^U 将光标所在字符到行首之间的所有字符删除,可以使用^E到行尾再^U来删除整行内容^Z 将前台运行的进程放入背景并暂停^D 发送EOF,结束当前输入流,如果 ...

  2. pytest框架之fixture前置和后置

    一.conftest.py 定义公共的fixture,多个测试类中都可以调用 pytest提供了conftest.py文件,可以将fixture定义在此文件中 运行测试用例时,不需要去导入这个文件,会 ...

  3. PHP7.1.X+wordpress+windows,安装Memcached服务

    1.下载安装Memcached 64位系统1.4.4版本:memcached-win64-1.4.4-14.zip 2.解压缩在任意盘符,然后进入文件夹,在文件夹中运行CMD输入以下命令: 1)输入 ...

  4. 使用pytorch时所遇到的问题总结

    使用pytorch时所遇到的问题总结 1.ubuntu vscode切换虚拟环境 在ubuntu系统上,配置工作区文件夹所使用的虚拟环境.之前笔者误以为只需要在vscode内置的终端上将虚拟环境切换过 ...

  5. java高并发系列 - 第10天:线程安全和synchronized关键字

    这是并发系列第10篇文章. 什么是线程安全? 当多个线程去访问同一个类(对象或方法)的时候,该类都能表现出正常的行为(与自己预想的结果一致),那我们就可以所这个类是线程安全的. 看一段代码: pack ...

  6. Python爬取《冰雪奇缘2》豆瓣影评

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 刘铨@CCIS Lab PS:如有需要Python学习资料的小伙伴可 ...

  7. PHP中设计模式以及魔术方法

    1.设计模式        1.1单例模式        口诀:三私一公 1.私有的静态属性用来保存对象的单例 2.私有的构造方法用来阻止在类的外部实例化 3.私有的__clone阻止在类的外部clo ...

  8. Linux网络——修改配置文件

    Linux网络——修改配置文件 摘要:本文主要学习了如何通过修改配置文件来设置网络参数. 配置文件 通过修改系统的配置文件为系统设置网络参数,这种方式的优点是可以永久保存,计算机重启后仍然生效.缺点是 ...

  9. 怎样深入学习php,成为php高手!?

    本文章开头我想问一句话:PHP是做什么的? 因为这是面试中会问到的一个问题,虽然它看起来很简单,回答做网站的,也就是个简单建站的水平.回答做网站后端开发的,对PHP有了一定的认识,回答做后端处理的,有 ...

  10. TCP三次握手四次分手—简单详解

    关于TCP三次握手四次分手,之前看资料解释的都很笼统,很多地方都不是很明白,所以很难记,前几天看的一个博客豁然开朗,可惜现在找不到了.现在把之前的疑惑总结起来,方便一下大家. 疑问一,上图传递过程中出 ...