动态更改选中复选框时的背景图片

Question

"Hi，这是我在Stack Overflow社区的第一个问题，我想在复选框被选中时动态更改网页的背景图像，但遇到了问题。"

"HTML:" - "HTML："

<ul>
    <li><label for="Lines">Add Fun: </label><input type="checkbox" id="Lines" name="Lines" /></li>
</ul>

jQuery：

<script type="text/javascript">
        if ($('#Lines').is(':checked')) {
                    $("body").css({'background-image': 'url(http://upload.wikimedia.org/wikipedia/commons/d/d3/Mud_wrestling_couple.jpg)'});
        }
</script>

当复选框被选中时，我希望它能够立即更改页面的背景。这张图片只是我在网上随便找到的。我想我可能忽视了什么。感谢您的帮助！

- user1524652

---

https://i.chzbgr.com/maxW500/6928617728/hA937289F/ - user752723

Answer 1

你可以尝试这个。

​$(function(){
    $('#Lines').on('change', function(){
        if($(this).is(':checked')) 
        {
            $("body").css({ 'background-image': 'url(image url)' });
        }
        else $("body").css({'background-image':''});
    });
});​

示例。

- The Alpha

---

16,500声望！哇！ :) 那真的很多...我只有200。:) 但你值得拥有它全部。;) 通过提供帮助，你可以获得声望... - user752723

Answer 2

好的，当复选框被改变时，您需要进行检查。因此，请使用.change()事件处理程序。

<script type="text/javascript">
    $('#Lines').change(function(){
       if (this.checked){
          $("body").css({'background-image': 'url(http://upload.wikimedia.org/wikipedia/commons/d/d3/Mud_wrestling_couple.jpg)'});
       } else {
          // here you should do what you want when the user un-checks the checkbox..
       }
    });
</script>

- Gabriele Petrioli

Answer 3

$('#Lines').click(function ()
{
 if ($(this).is(':checked'))
 {
   $("body").css({'background-image': 'url(http://upload.wikimedia.org/wikipedia/commons/d/d3/Mud_wrestling_couple.jpg)'});
 }
});

- David Houde