Change background image dynamically on checked checkbox

Question

Hi this is my first question in the stackoverflow community and I am having problems changing the background image of my webpage dynamically when a checkbox is checked

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>

I want it to change the background of the body as soon as the checkbox is checked. The image is just a random one I found online. Think I might be overlooking something. Thanks for the help!

i.chzbgr.com/maxW500/6928617728/hA937289F

user752723
– user752723

2012-12-30 01:01:37 +00:00
Commented Dec 30, 2012 at 1:01 — user752723
– user752723, Commented Dec 30, 2012 at 1:01

The Alpha · Accepted Answer · 2012-12-30 01:02:13Z

3

You may try this

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

Example.

answered Dec 30, 2012 at 1:02

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user752723 Over a year ago

16,500 rep! Wow! :) That's a lot... I have 200. :) But you deserve it all. ;) You get rep by being helpful...

Gabriele Petrioli · Accepted Answer · 2012-12-30 01:02:59Z

1

Well, you need to do the check once the checkbox is altered.. so use the .change() event handler

<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>

answered Dec 30, 2012 at 1:02

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Comments

David Houde · Accepted Answer · 2012-12-30 01:03:41Z

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)'});
 }
});

answered Dec 30, 2012 at 1:03

David Houde

4,7881 gold badge22 silver badges29 bronze badges

Collectives™ on Stack Overflow

Change background image dynamically on checked checkbox

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related