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. CSP 2019 游记

    Day -32 开坑. 没什么好说的,等个 5 天等初赛(应该叫第一轮认证)挂掉之后就能弃坑了. 今天开始停课,虽然每天只停半天,但是感觉还是特别的舒服~ 然而得等初赛过了才能全天停课-- 没关系,熬 ...

  2. Paper | Highway Networks

    目录 1. 网络结构 2. 分析 解决的问题:在当时,人们认为 提高深度 是 提高精度 的法宝.但是网络训练也变得很困难.本文旨在解决深度网络训练难的问题,本质是解决梯度问题. 提出的网络:本文提出的 ...

  3. Redis 内存淘汰机制

    Redis内存淘汰指的是用户存储的一些键被可以被Redis主动地从实例中删除,从而产生读miss的情况,那么Redis为什么要有这种功能?这就是我们需要探究的设计初衷.Redis最常见的两种应用场景为 ...

  4. python学习第一天第二天总结

    变量赋值 1, 变量由字⺟, 数字,下划线搭配组合⽽成 2, 不可以⽤数字开头,更不能是全数字 3,不能是pythond的关键字, 这些符号和字⺟已经被python占⽤, 不可以更改 4,不要⽤中⽂ ...

  5. attention 汇总(持续)

    Seq2seq Attention Normal Attention 1.  在decoder端,encoder state要进行一个线性变换,得到r1,可以用全连接,可以用conv,取决于自己,这里 ...

  6. Spring5源码解析2-register方法注册配置类

    接上回已经讲完了this()方法,现在来看register(annotatedClasses);方法. // new AnnotationConfigApplicationContext(AppCon ...

  7. Java技巧——将前端的对象数组通过Json字符串传到后端并转换为对象集合

    Java技巧——将前端的对象数组通过Json字符串传到后端并转换为对象集合 摘要:本文主要记录了如何将将前端的对象数组通过Json字符串传到后端,并在后端将Json字符串转换为对象集合. 前端代码 前 ...

  8. 苹果 iOS13.2.2 正式版修复闷杀后台问题了?别担心,PerfDog 帮你来检测!

    导语 苹果于上周推送了iOS 13.2版本,带来了用户备受期待的图像处理系统深度融合(Deep Fusion),新增70多个表情.HomeKit安全视频.Siri隐私设置和支持AirPods Pro等 ...

  9. 如何给HTML页面的文本设置字符和单词间距

    设置字符和单词间距介绍 属性名 单位 描述 letter-spacing px 设置字符间距 word-spacing px 设置单词间距 letter-spacing设置字符间距 letter-sp ...

  10. Qt Creator单步调试快捷键F10经常失灵问题

    使用Qt Creator调试程序的时候经常会遇到F10单步调试快捷键不响应的问题. 打开调试菜单如下:有两个快捷键为F10的调试菜单项,于是快捷键冲突了! 解决办法:废话不说,直接上图 由于Start ...