純粋なCSSのラジオボタンスライダーの実装からJSイベントを作成

Question

私は以下のラジオスライダーの純粋なHTMLとCSSの実装を持っています。どのようなトグル関数に基づいてJavaScriptのイベントを作成する良い方法は何ですか？私は、コンポーネントをポーリングしてその位置を取得するいくつかのアプローチを見ることができますが、私はどのようにコールバックなどをトリガする変更を取得するか分からない。ありがとう。

html, 
 
body, 
 
div, 
 
span, 
 
label { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font-size: 100%; 
 
    font: inherit; 
 
    vertical-align: baseline; 
 
} 
 

 
body { 
 
    line-height: 1; 
 
} 
 

 
body { 
 
    color: #404040; 
 
    font-family: 'Lucida Grande', Verdana, sans-serif; 
 
    font-size: 13px; 
 
    font-weight: normal; 
 
    line-height: 20px; 
 
    background: #3b3f46; 
 
} 
 

 
.container { 
 
    margin: 0 auto; 
 
    padding: 90px 0; 
 
    width: 400px; 
 
    background-color: false; 
 
    background-image: -webkit-gradient(radial, center center, 0, center center, 460, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(100%, transparent)); 
 
    background-image: -webkit-radial-gradient(center, cover, rgba(255, 255, 255, 0.1), transparent); 
 
    background-image: -moz-radial-gradient(center, cover, rgba(255, 255, 255, 0.1), transparent); 
 
    background-image: -ms-radial-gradient(center, cover, rgba(255, 255, 255, 0.1), transparent); 
 
    background-image: -o-radial-gradient(center, cover, rgba(255, 255, 255, 0.1), transparent); 
 
    background-image: radial-gradient(center, cover, rgba(255, 255, 255, 0.1), transparent); 
 
} 
 

 
.switch { 
 
    position: relative; 
 
    height: 26px; 
 
    width: 120px; 
 
    margin: 20px auto; 
 
    background: rgba(0, 0, 0, 0.25); 
 
    border-radius: 3px; 
 
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); 
 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); 
 
} 
 

 
.switch-label { 
 
    position: relative; 
 
    z-index: 2; 
 
    float: left; 
 
    width: 58px; 
 
    line-height: 26px; 
 
    font-size: 11px; 
 
    color: rgba(255, 255, 255, 0.35); 
 
    text-align: center; 
 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); 
 
    cursor: pointer; 
 
} 
 

 
.switch-label:active { 
 
    font-weight: bold; 
 
} 
 

 
.switch-label-off { 
 
    padding-left: 2px; 
 
} 
 

 
.switch-label-on { 
 
    padding-right: 2px; 
 
} 
 

 
.switch-input { 
 
    display: none; 
 
} 
 

 
.switch-input:checked + .switch-label { 
 
    font-weight: bold; 
 
    color: rgba(0, 0, 0, 0.65); 
 
    text-shadow: 0 1px rgba(255, 255, 255, 0.25); 
 
    -webkit-transition: 0.15s ease-out; 
 
    -moz-transition: 0.15s ease-out; 
 
    -ms-transition: 0.15s ease-out; 
 
    -o-transition: 0.15s ease-out; 
 
    transition: 0.15s ease-out; 
 
    -webkit-transition-property: color, text-shadow; 
 
    -moz-transition-property: color, text-shadow; 
 
    -ms-transition-property: color, text-shadow; 
 
    -o-transition-property: color, text-shadow; 
 
    transition-property: color, text-shadow; 
 
} 
 

 
.switch-input:checked + .switch-label-on ~ .switch-selection { 
 
    left: 60px; 
 
    /* Note: left: 50%; doesn't transition in WebKit */ 
 
} 
 

 
.switch-selection { 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 2px; 
 
    left: 2px; 
 
    display: block; 
 
    width: 58px; 
 
    height: 22px; 
 
    border-radius: 3px; 
 
    background-color: #65bd63; 
 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9dd993), color-stop(100%, #65bd63)); 
 
    background-image: -webkit-linear-gradient(top, #9dd993, #65bd63); 
 
    background-image: -moz-linear-gradient(top, #9dd993, #65bd63); 
 
    background-image: -ms-linear-gradient(top, #9dd993, #65bd63); 
 
    background-image: -o-linear-gradient(top, #9dd993, #65bd63); 
 
    background-image: linear-gradient(top, #9dd993, #65bd63); 
 
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); 
 
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); 
 
    -webkit-transition: left 0.15s ease-out; 
 
    -moz-transition: left 0.15s ease-out; 
 
    -ms-transition: left 0.15s ease-out; 
 
    -o-transition: left 0.15s ease-out; 
 
    transition: left 0.15s ease-out; 
 
}

<div class="container"> 
 
    <div class="switch"> 
 
    <input type="radio" class="switch-input" name="view" value="week" id="week" checked> 
 
    <label for="week" class="switch-label switch-label-off">ON</label> 
 
    <input type="radio" class="switch-input" name="view" value="month" id="month"> 
 
    <label for="month" class="switch-label switch-label-on">OFF</label> 
 
    <span class="switch-selection"></span> 
 
    </div> 
 
</div>

Answer 1

あなたは、単に

if (document.getElementById('week').checked) { 
    //task to perform when "ON" 
} 
else 
{ 
    //task to perform when "OFF" 
}