Question

我发现了一个非常好的CSS按钮创建者http://proto.io/freebies/onoff/。我创建了一个开关按钮，我知道我需要执行两个JS代码。不同的开关和不同的开关。让我们在开启时发出警报（“开启”）并在关闭时发出警报（“关闭”）。你能帮帮我吗？这是html和css代码

<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>


<style type="text/css">
    .onoffswitch {
      position: relative;
      width: 82px;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select: none;
    }
    .onoffswitch-checkbox {
      display: none;
    }
    .onoffswitch-label {
      display: block; overflow: hidden; cursor: pointer;
      border: 2px solid #FFFFFF; border-radius: 5px;
    }
    .onoffswitch-inner {
      width: 200%;
      margin-left: -100%;
      -moz-transition: margin 0.3s ease-in 0s;
      -webkit-transition: margin 0.3s ease-in 0s;
      -o-transition: margin 0.3s ease-in 0s;
      transition: margin 0.3s ease-in 0s;
    }
    .onoffswitch-inner:before, .onoffswitch-inner:after {
    float: left; width: 50%; height: 24px; padding: 0; line-height: 24px;
    font-size: 18px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    }
    .onoffswitch-inner:before {
      content: "on";
      padding-left: 14px;
      background-color: #2FFF3D;
      color: #FFFFFF;
    }
    .onoffswitch-inner:after {
      content: "off";
      padding-right: 14px;
      background-color: #ADADAD;
      color: #FFFFFF;
      text-align: right;
    }
    .onoffswitch-switch {
      width: 28px; margin: 0px;
      background: #FFFFFF;
      border: 2px solid #FFFFFF; border-radius: 5px;
      position: absolute; top: 0; bottom: 0; right: 50px;
      -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
      -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
      background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
      background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
      background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
      background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
      margin-left: 0;
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
      right: 0px;
    }
</style>

Answer 1

这是一个非常简单的JQuery选项DEMO

$('#myonoffswitch').on('change', function() {
    if ($(this).is(':checked')) {
         alert("ON")   
    } else {
         alert("OFF")   
    }
});

如果您希望在动画完成后运行该功能，您也可以执行此类操作DEMO

$('#myonoffswitch').on('change', function() {
        if ($(this).is(':checked')) {
            setTimeout(function() {
                alert("ON")
            }, 334); 
        } else {
            setTimeout(function() {
                alert("OFF")
            }, 334);  
        }
});

Answer 2

我建议使用JQuery作为3rror404的目的。

但是如果你想要纯粹的Javascript，你可以做这样的事情

HTML

<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" onchange="changeSwitch()" checked>

JS

function changeSwitch() {
     var isChecked = document.getElementById("myonoffswitch").checked;
     if(isChecked) {
         //do what ever you need here when checked
         alert('ON')
     }
    else {
        //do what ever you need when not checked
        alert('OFF');
    }
}

Demo Here

Html，CSS Switch按钮

2 个答案: