开关switch

开关

<label class="um-switch1">
     <input type="checkbox" value="on" checked="checked">
     <div class="um-track">
         <div class="um-handle"></div>
     </div>
</label>

效果如下图：

<label class="um-switch2 um-box-vc"> 
    <input type="checkbox" class="um-switch2" /> 
    <span class="um-switch2-check" data-on-text="打开"  data-off-text="关闭"></span>
</label>

通过设置checked属性，可为开关添加默认打开状态

Js获取switch控件值

$(".um-switch1").on("change","input[type=checkbox]",function(){ 
    if(this.checked) { 
        alert("开关1状态为:开"); 
    }else { 
        alert("开关1状态为:关"); 
    }
})

使用jQuery的prop方法设置checked属性时，在IOS和部分安卓设备上视图无法更新，需要手动触发change事件如下:

$("input:checkbox").prop("checked", value).trigger("change");