开关按钮

body * {font-family: Arial, Helvetica, sans-serif;box-sizing: border-box;-moz-box-sizing: border-box;}
a {color: #888;    text-decoration: none;}
small {font-size: 13px;font-weight: normal;padding-left: 10px;}
#first_div {width: 90%;    max-width: 600px;min-width: 340px;margin: 50px auto 0;color: #444;}
#second_div {width: 90%;max-width: 600px;min-width: 340px;margin: 50px auto 0;background: #f3f3f3;border: 6px solid #eaeaea;padding: 20px 40px 40px;text-align: center;
border-radius: 2px;}
#third_div {width: 90%;max-width: 600px;min-width: 340px;margin: 10px auto 0;}

/* */
.lcs_wrap {
    display: inline-block;
    direction: ltr;
    height: 28px;
    vertical-align: middle;
}
.lcs_wrap input {
    display: none;
}
.lcs_switch {
    display: inline-block;
    position: relative;
    width: 37px;
    height: 17px;
    border-radius: 30px;
    background: #ddd;
    overflow: hidden;
    cursor: pointer;
 -webkit-transition: all .2s ease-in-out;
 -ms-transition:     all .2s ease-in-out;
 transition:         all .2s ease-in-out;
}
.lcs_cursor {
    display: inline-block;
    position: absolute;
    top: 0px;
    width: 17px;
    height: 17px;
    border-radius: 100%;
    background: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.1);
    z-index: 10;
 -webkit-transition: all .2s linear;
 -ms-transition:     all .2s linear;
 transition:         all .2s linear;
}
.lcs_label {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 18px;
    color: #fff;
    font-weight: bold;
    position: absolute;
    width: 33px;
    top: 5px;
    overflow: hidden;
    text-align: center;
    opacity: 0;
 -webkit-transition: all .2s ease-in-out .1s;
 -ms-transition:     all .2s ease-in-out .1s;
 transition:         all .2s ease-in-out .1s;
}
.lcs_label.lcs_label_on {
    left: -70px;
    z-index: 6;
}
.lcs_label.lcs_label_off {
    right: -70px;
    z-index: 5;
}
/* on */
.lcs_switch.lcs_on {
    background: #75b936;
    box-shadow: 0 0 2px #579022 inset;
}
.lcs_switch.lcs_on .lcs_cursor {
    left: 20px;
}
.lcs_switch.lcs_on .lcs_label_on {
    left: 10px;
    opacity: 1;
}
/* off */
.lcs_switch.lcs_off {
    background: #b2b2b2;
    box-shadow: 0px 0px 2px #a4a4a4 inset;
}
.lcs_switch.lcs_off .lcs_cursor {
    left:0px;
}
.lcs_switch.lcs_off .lcs_label_off {
    right: 10px;
    opacity: 1;
}
/* disabled */
.lcs_switch.lcs_disabled {
    opacity: 0.65;
    filter: alpha(opacity=65);
    cursor: default;
}

(function(a){if("undefined"!=typeof a.fn.lc_switch)return!1;a.fn.lc_switch=function(d,f){a.fn.lcs_destroy=function(){a(this).each(function(){a(this).parents(".lcs_wrap").children().not("input").remove();a(this).unwrap()});return!0};a.fn.lcs_on=function(){a(this).each(function(){var b=a(this).parents(".lcs_wrap"),c=b.find("input");"function"==typeof a.fn.prop?b.find("input").prop("checked",!0):b.find("input").attr("checked",!0);b.find("input").trigger("lcs-on");b.find("input").trigger("lcs-statuschange");
b.find(".lcs_switch").removeClass("lcs_off").addClass("lcs_on");if(b.find(".lcs_switch").hasClass("lcs_radio_switch")){var d=c.attr("name");b.parents("form").find("input[name="+d+"]").not(c).lcs_off()}});return!0};a.fn.lcs_off=function(){a(this).each(function(){var b=a(this).parents(".lcs_wrap");"function"==typeof a.fn.prop?b.find("input").prop("checked",!1):b.find("input").attr("checked",!1);b.find("input").trigger("lcs-off");b.find("input").trigger("lcs-statuschange");b.find(".lcs_switch").removeClass("lcs_on").addClass("lcs_off")});
return!0};return this.each(function(){if(!a(this).parent().hasClass("lcs_wrap")){var b="undefined"==typeof d?"ON":d,c="undefined"==typeof f?"OFF":f,b=b?‘<div class="lcs_label lcs_label_on">‘+b+"</div>":"",c=c?‘<div class="lcs_label lcs_label_off">‘+c+"</div>":"",g=a(this).is(":disabled")?!0:!1,e=a(this).is(":checked")?!0:!1,e=""+(e?" lcs_on":" lcs_off");g&&(e+=" lcs_disabled");b=‘<div class="lcs_switch ‘+e+‘"><div class="lcs_cursor"></div>‘+b+c+"</div>";!a(this).is(":input")||"checkbox"!=a(this).attr("type")&&
"radio"!=a(this).attr("type")||(a(this).wrap(‘<div class="lcs_wrap"></div>‘),a(this).parent().append(b),a(this).parent().find(".lcs_switch").addClass("lcs_"+a(this).attr("type")+"_switch"))}})};a(document).ready(function(){a(document).delegate(".lcs_switch:not(.lcs_disabled)","click tap",function(d){a(this).hasClass("lcs_on")?a(this).hasClass("lcs_radio_switch")||a(this).lcs_off():a(this).lcs_on()});a(document).delegate(".lcs_wrap input","change",function(){a(this).is(":checked")?a(this).lcs_on():
a(this).lcs_off()})})})(jQuery);

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="switch.css">
</head>
<body>
    <!--代码部分begin-->
    <div id="second_div">
        <form>
            <div style="float: left; width: 50%;">
                <p>
                    <input type="checkbox" name="check-1" value="4" class="lcs_check" autocomplete="off" />
                </p>
                <p>
                    <input type="checkbox" name="check-2" value="5" class="lcs_check" disabled="disabled" autocomplete="off" />
                </p>
                <p>
                    <input type="checkbox" name="check-3" value="6" class="lcs_check lcs_tt1" checked="checked" autocomplete="off" />
                </p>
            </div>
            <div style="float: right; width: 50%;">
                <p>
                    <input type="radio" name="radio-1" value="1" class="lcs_check lcs_tt2" autocomplete="off" />
                </p>
                <p>
                    <input type="radio" name="radio-1" value="2" class="lcs_check lcs_tt2" disabled="disabled" autocomplete="off" />
                </p>
                <p>
                    <input type="radio" name="radio-1" value="3" class="lcs_check lcs_tt2" checked="checked" autocomplete="off" />
                </p>
            </div>
        </form>
        <div style="clear:both;"></div>
    </div>
        <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="switch.js"></script>
    <script>
$(function(){
    $(‘input‘).lc_switch();
    $(‘body‘).delegate(‘.lcs_check‘, ‘lcs-statuschange‘, function() {
        var status = ($(this).is(‘:checked‘)) ? ‘checked‘ : ‘unchecked‘;
        console.log(‘field changed status: ‘+ status );
    });
    $(‘body‘).delegate(‘.lcs_check‘, ‘lcs-on‘, function() {
        console.log(‘field is checked‘);
    });
    $(‘body‘).delegate(‘.lcs_check‘, ‘lcs-off‘, function() {
        console.log(‘field is unchecked‘);
    });
});
    </script>
    <!--代码部分end-->
</body>
</html>