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. kvm与xen虚拟化的比较(转)

    Linux虚拟化技术的用户目前有两种免费的开源管理程序可以选择:Xen和KVM. 作为较早出现的虚拟化技术,Xen是“第一类”运行在裸机上的虚拟化管理程序(Hypervisor),也是当前相当一部分商 ...

  2. CPU参数指标说明

    %user %user表示CPU一共花了多少比例的时间运行在用户态空间或者说是用户进程(running user space processes) 典型的用户态空间程序有:Shells.数据库.web ...

  3. JVM基础详解

    JVM基础解析(一) Java里面有 JDK ,JRE, JVM ,这三者的关系是怎么样的呢? JDK是编译时环境: 整个Java的核心,包括了Java运行环境JRE.Java工具和Java基础类库 ...

  4. HTTP系列之Referer和Referrer policy简介

    目录 @ 1.前言摘要 在csdn网站随便抓个链接来看看: Referer参数: referrer policy是unsafe url的,ok,下面介绍一下Referer和referrer polic ...

  5. Sql ----- sqlserver 中的if 判断 case... when

    与查询放到一块使用: 语法: select case when 范围条件 then 产生的结果 when 范围条件 then 产生的结果 else 不是以上范围产生的结果 end from 表名 个人 ...

  6. laravel中select2多选,初始化默认选中项

    项目中有发送消息功能,需要能通过搜索,多选用户,来指定发送人.使用 select2 插件来完成. select2 的 html 代码如下: <div class="form-group ...

  7. SQL常用函数之STR()

    使用str函数   :STR 函数由数字数据转换来的字符数据.   语法      STR    (    float_expression    [    ,    length    [    , ...

  8. 敏捷软件开发_UML<一>

    敏捷软件开发_UML  所看书籍是:敏捷软件开发_原则.模式与实践_C#版(美)马丁著,这本书写的非常棒,感谢作者.该归纳总结的过程按照我读的顺序写. UML  在建造桥梁,零件,自动化设备之前需要建 ...

  9. QP编码详解

    - 原理 QP编码是一种使用可打印的ASCII字符 (如字母.数字与"=")表示各种编码格式下的字符.其方法是将一个8bit的字符表示成两个16进制数,并在前面加一个"= ...

  10. 一次Ubuntu16系统的找回root密码的过程

    一 背景知识介绍 ubuntn系统的默认配置,超级用户root的密码是随机的,如果没提前对root用户的密码进行设置, 是不能直接通过root的身份来进行某些操作的,必须使用sudo命令,并通过普通用 ...