jquery - チェックボックスがクリックされたときに背景色を変更する

Question

ここにあるようなチェックボックスに接続されたスライダーボタンを作成しようとしています: http://www.paulund.co.uk/style-checkboxes-with-css。スライダーは正常に動作しますが、クリックしたときに背景色を変更することはできません。

私は数日間これを理解しようとしてきましたが、答えが何であるかを見つけました (例:チェックボックスがクリックされたときに div の背景色を変更し、 ChecklistBox の CheckBox の背景色を変更する)、しかし、それを適用しようとすると私のコードでは、背景色は変更されません。

すべてのデザインが既に 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;
}