在选中的复选框上动态更改背景图像

时间:2012-12-30 00:54:46

标签: jquery html

嗨,这是我在stackoverflow社区的第一个问题,我在检查复选框时动态更改网页的背景图片时出现问题

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>

我希望它在选中复选框后立即更改正文背景。图像只是我在网上找到的一个随机图像。想想我可能会忽视某些事情。谢谢你的帮助!

3 个答案:

答案 0 :(得分:3)

你可以试试这个

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

Example

答案 1 :(得分:1)

嗯,您需要在复选框被更改后进行检查..所以使用.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>

答案 2 :(得分:0)

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