javascript - 易于切换的背景

Question

如何创建一个复选框来打开和关闭我的网站背景？基本上，当我切换复选框时，我希望它定位图像并将其显示为背景。当我取消选中复选框时，我希望它忽略(或达到相同效果的东西)设置背景的代码。

注意:我已经在 Stackoverflow 和 Google 上研究了这个主题，虽然我找到了一些有帮助的文章，但我没有找到能让我实现我想要的效果。

Answer 1

您可以使用 jQuery change 和 toggleclass 函数来完成。

$(function() {
    $('#checkbox').change(function(){
        $('body').toggleClass('toogle-bg'); 
    });
});

.toogle-bg {
    background: url("http://goo.gl/Yu3rXz") 0 0 no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label><input id="checkbox" type="checkbox"/> checkbox</label>