Change Body Background-Color on.Click to apply site-wide and on refresh?

Question

I would like to change the background-color of the body (and for a few modal elements) site-wide when a user toggles between two radios..

Here's the html for the radio buttons:

  <div class="btn-group btn-group-xs" data-toggle="buttons">
    <label class="btn btn-default lightBtn">
      <input type="radio" name="options" id="light"> Light
    </label>
    <label class="btn btn-default darkBtn">
      <input type="radio" name="options" id="dark"> Dark
    </label>
  </div>

And the jquery that I've tried for the event, which has yet to change the background-color..

$( function() {
   $('#lightBtn').click( function() {
     $('body').css('background', 'white' );    
   });
   $('#darkBtn').click( function() {
     $('body').css('background', 'black' );    
   });
});

Also, the toggle on the btns resets from page to page.. is there jquery event language to maintain the toggle selection cross-page?

Answer 1

Your HTML defines lightBtn and darkBtn as classes ( . ) of your label elements, while your jQuery is targeting elements with the ID's lightBtn and darkBtn ( # ).

Change them to be the same, eg:

$( function() {
   $('.lightBtn').click( function() {
     $('body').css('background', 'white' );    
   });
   $('.darkBtn').click( function() {
     $('body').css('background', 'black' );    
   });
});

jsFiddle here

Or just change your HTML labels to be defined like:

<label id="lightBtn" class="btn btn-default"> ...

<label id="darkBtn" class="btn btn-default"> ...