switchery开关使用

官网地址

1.switchery官网地址
2.switchery github地址

使用

1.引入css以及css
2.1.html部分

 <input type="checkbox" id="status{{$express->id}}" ids="{{$express->id}}" class="js-switch"   {{$express->status==1?'checked':''}} data-color="#F7CB62"/>

2.2初始化开关

多个开关
  var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
            $('.js-switch').each(function(k,v) {
                new Switchery($(this)[0], $(this).data());
            });
        });
        单个开关
        var elem = document.querySelector('.js-switch');
		var init = new Switchery(elem);

2.3点击开关时获取他的状态

页面只有单个开关的状态,false为关闭,true为开启
$('.js-switch').change(function () {
var status= $(this).prop("checked")
})
页面有多个开关时获取被操作开光的状态,,false为关闭,true为开启
 $(".js-switch").on('change', function () {
        var status=  $(this).prop("checked")
   })