改變背景顏色複選框，單擊

當我試圖讓連接到像一個在這裏找到一個複選框滑塊按鈕：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; 
}

來源

2013-05-04 maverick23

對不起，我需要澄清，我需要將複選框的（黃色）背景更改爲新顏色。 – maverick23 2013-05-04 00:35:35

另一條評論...將'body'改爲'div'就足夠了。謝謝Vucko！ – maverick23 2013-05-04 00:48:17

使用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。

來源

2013-05-04 00:25:39 Vucko

改變背景顏色複選框，單擊

回答

相關問題