前端插件switchery.js，多个开关的使用方法

首先引入jquery、switchery.js、switchery.css

 <script type="text/javascript" src="/bundles/jquery/js/jQuery-2.2.0.min.js"></script>
 <script type="text/javascript" src="/bundles/switchery/js/switchery.js"></script>
 <link rel="stylesheet" href="/bundles/switchery/css/switchery.css" />

dom中的结构例如

  <form class="form-horizontal">
                       <div class="form-group ">
                                <label for="picbg" class="control-label" id="show_bg">显示背景图片：</label>          
                                <div class="switch"> 
                                    <input type="checkbox" class="js-switch form-control" checked="" id="picbg" name="picbg">
                                </div>
                        </div>
                        <div class="form-group ">
                                <label for="showtime" class="control-label" id="labeltime">显示时间：</label>          
                                <div class="switch"> 
                                    <input type="checkbox" class="js-switch form-control" checked="" id="showtime" name="showtime">
                                 
                                </div>
                        </div>
  </form>

多个开关批量配置

elem.forEach(function(html) {
var switchery = new Switchery(html,{size:"small", color: '#26a8eb',secondaryColor:"#e4e4e4"});
});

ios风格的开关样式

switchery.js官方地址

官网很详细，看不懂去官方看，不懂留言哦