изменение цвета фона при щелчке по галочке

Question

Я пытаюсь сделать кнопку слайдера, связанную с флажком, как показано здесь: http://www.paulund.co.uk/style-checkboxes-with-css. Ползунок отлично работает, но я не могу заставить его менять цвет фона при его нажатии.

Я пытался выяснить это на несколько дней и нашел, что должно быть ответом (например: Change background color of div when checkbox is clicked и Changing ChecklistBox's CheckBox Background Color), но когда я пытаюсь применить его к моему коду, он не меняет фоновый цвет.

Исправление в CSS было бы лучше, поскольку весь дизайн находится в CSS уже, но Jquery, очевидно, тоже прекрасен. Заранее спасибо за помощь!

Вот что я получил (извиняюсь заранее за длительный в CSS) HTML:

<div class="checkboxOne"> 
    <input type="checkbox" 
    value="1" id="checkboxOneInput" name="" /> 
    <label for="checkboxOneInput"></label> 
</div> 

CSS:

input[type=checkbox] { 
visibility: hidden; 
position: absolute; 
} 

.checkboxOne{ 
width: 220px; 
height: 40px; 
background-color: yellow; 
margin: 20px 60px; 
border-radius: 50px; 
font-family:Calibri; 
position: relative; 
} 

.checkboxOne input[type=checkbox]:checked + label { 
left: 120px; 
background:orange; 
} 

/*slider*/ 
.checkboxOne label { 
display: block; 
width: 92px; 
height: 22px; 
border-radius: 50px; 
-webkit-transition: all .1s ease; 
-moz-transition: all .1s ease; 
-o-transition: all .1s ease; 
-ms-transition: all .1s ease; 
transition: all .1s ease; 
cursor: pointer; 
position: absolute; 
top: 9px; 
z-index: 1; 
left: 12px; 
background:green; 
} 

Answer 1

Использование JQuery с нажмите событие на label (изменение элемента body):

$('label').on('click',function(){ 
    var color=$(this).css('background-color'); 
    if(color == 'rgb(0, 128, 0)') { //green 
     $('body').css('background-color','red'); 
    } 
    else{ 
     $('body').css('background-color','blue'); 
    } 
}); 

JSFiddle.