单击复选框时更改背景颜色

时间:2013-05-04 00:09:55

标签: jquery html css

我正在尝试将滑块按钮连接到如下所示的复选框:http://www.paulund.co.uk/style-checkboxes-with-css。滑块工作正常,但我无法在单击时更改背景颜色。

我一直试图解决这个问题几天,并找到了答案(例如:Change background color of div when checkbox is clickedChanging 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;
}

1 个答案:

答案 0 :(得分:1)

label上使用 JQuery 点击事件(更改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