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. 【PAT甲级】Public Bike Management 题解

    题目描述 There is a public bike service in Hangzhou City which provides great convenience to the tourist ...

  2. python有哪些优点跟缺点

    显著的优点 1. 语言简洁优美,Java能实现的python都能实现(除安卓开发),python能实现的Java不一定能实现如(自动化运维,爬虫) 2. 跨平台,window, linux,mac通用 ...

  3. H5纯前端生成Excel表格

    H5纯前端生成Excel表格方法如下: <!DOCTYPE html> <html> <head> <title></title> < ...

  4. C# windows服务,解决应用程序开机自启问题

    最近在东营做一个超市购物的项目,业务体量很小,是仅供内部员工使用的内网应用程序,其中涉及一个商品数据同步的winform应用程序,有一个问题就是服务器重启后,必须登录服务器操作系统,手动启动才行,于是 ...

  5. Ubuntu安装CUDA、CUDNN比较有用的网址总结

    Ubuntu安装CUDA.CUDNN比较有用的网址总结 1.tensorflow各个版本所对应的的系统要求和CUDA\CUDNN适配版本 https://tensorflow.google.cn/in ...

  6. python免密远程执行shell

    使用paramiko库:https://github.com/paramiko/paramiko 简单封装SSH类 import paramiko class SSH: def __init__(se ...

  7. 死磕 java同步系列之ReentrantReadWriteLock源码解析

    问题 (1)读写锁是什么? (2)读写锁具有哪些特性? (3)ReentrantReadWriteLock是怎么实现读写锁的? (4)如何使用ReentrantReadWriteLock实现高效安全的 ...

  8. vue-商品管理案例改进

    案例改进 vue-resource全局配置: Vue.http.options.root = 'http://vue.studyit.io/'; 全局启用 emulateJSON 选项 Vue.htt ...

  9. Python打包成exe文件很难?一分钟即可学会,并添加图标!

    环境1.python 3.72.pyinstaller下载方式:2.1 python安装(略)2.2 安装pyinstaller打开DOS窗口输入以下命令:pip install pyinstalle ...

  10. PlayJava Day002

    今日所学: /* 2019.08.19开始学习,此为补档. */ 流程控制 条件: 一重用if 二重用if ... else 三重用if ... else if ... else 多重用switch ...