bootstrap-switch.js，让checkbox美起来

妖狐艹你老母 2021-09-10 15:20 351阅读 0赞

[bootstrap-switch.js][]是一个很美（对，只能这一个字）的开关按钮组件。

## 效果 ##

![这里写图片描述][20151012175011067]  
![这里写图片描述][20151012175020135]

## 材料准备 ##

[Bootstrap 开关（switch）控][Bootstrap _switch]

## 开始 ##

引入这两个文件，至于bootstrap的css和js，肯定是要的！

1. div完全是为了给checkbox添加式样。  
2. input就很简单了，就是普通的标签。

## 启动 ##

$("div[class='switch']").each(function() { 
        $this = $(this);
        var onColor = $this.attr("onColor");
        var offColor = $this.attr("offColor");
        var onText = $this.attr("onText");
        var offText = $this.attr("offText");
        var labelText = $this.attr("labelText");
    
        var $switch_input = $(" :only-child", $this);
        $switch_input.bootstrapSwitch({
            onColor : onColor,
            offColor : offColor,
            onText : onText,
            offText : offText,
            labelText : labelText
        });
    });

1. 通过jquery获取所有的switch div，从而获取其属性onColor 、offColor 等等  
2. 紧接着，获取div包含的子元素input。  
3. 通过bootstrapSwitch方法对input进行加载。

> 笑对现实的无奈，不能后退的时候，不再傍徨的时候，永远向前　路一直都在──陈奕迅《路一直都在》  
> 本文出自:【[沉默王二的博客][Link 1]】

[bootstrap-switch.js]: http://www.bootcss.com/p/bootstrap-switch/
[20151012175011067]: /images/20210506/453f134d20ec4257bc41960ca1041d3a.png
[20151012175020135]: /images/20210506/e216bfc1f431452a99375c007123788d.png
[Bootstrap _switch]: https://github.com/nostalgiaz/bootstrap-switch
[Link 1]: http://blog.csdn.net/qing_gee