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. AtCoder Grand Contest 040

    Preface 今年准备省选啥都不说了,省选题基本上都做过一遍了,开始尝试板刷AGC 这场做完就从AGC001开始吧,感觉以我的速度和来机房的频率一个礼拜做一场都谢天谢地了 A - >< ...

  2. Paper | Non-local Neural Networks

    目录 1. 动机 2. 相关工作 3. Non-local神经网络 3.1 Formulation 3.2 具体实现形式 3.3 Non-local块 4. 视频分类模型 4.1 2D ConvNet ...

  3. JdbcTemplate经典案例

    一.JdbcTemplate案例配置式 (1)导入依赖 <dependency> <groupId>org.springframework</groupId> &l ...

  4. Java多线程并发面试问答

    Java并发面试问答 什么是原子操作?Java并发API中的原子类是什么? 原子操作在单个任务单元中执行,而不受其他操作的干扰.在多线程环境中,原子操作是必需的,以避免数据不一致. int++不是原子 ...

  5. visdom 简单使用

     官方网址: https://github.com/facebookresearch/visdom 入门教程: http://www.ainoobtech.com/pytorch/pytorch-v ...

  6. java基础第十七篇之网络编程和装饰者模式

    1:网络概述 1.1 网络的发展Net 1964年,美国人---> 阿帕网--->以太网Internet 1.2 网络的通信协议 windows电脑,android手机,Mac平板---& ...

  7. jdk api 1.6,1.7,1.8,1.9版本(中文)

    有需要的朋友,请自行到百度云下载 链接:https://pan.baidu.com/s/18WgEZ1WpBz5YexbbgikJcA 提取码:xry4

  8. xcode 运行出现的相应配置问题以及解决办法

    在学习iOS开发的过程中,经常会在网上找一些demo学习,但是网上找的demo,在自己的机子上都会出各种各样的问题.下面我来整理一下,我所遇到的问题. 最近在接受一个比较老的混合开发的项目,出现了一下 ...

  9. 剑指offer 13:数值的整数次方

    题目描述 给定一个double类型的浮点数base和int类型的整数exponent.求base的exponent次方. 保证base和exponent不同时为0   问题分析 计算一个浮点数的整数次 ...

  10. 外置 tomcat 服务器设置

    外置 Tomcat 没这么太用, 今天在 windows  搭 xwiki  服务器, 比预期多花了点时间, 主要是 tomcat 环境变量没配对, tomcat 启动后闪退, 还没有日志. 最后定位 ...