jQuery selecting div to change background on radio button click

I have a set of dynamic radio buttons that all show/hide certain fields when selected, and I'm trying to have the same jQuery block that shows and hide fields also show the correct preview image. It's for a wordpress theme. The container (tested with CSS setting background to an image) is called #layoutpreview. Here is the jQuery I'm using to switch the background-image:

if (layoutchecked =="tc") 
{
   jQuery('#CWP_layout').nextAll('div').hide('')
    var layoutchecked = jQuery('.radio_wrapper').children('input:checked').attr('value') 
    if (layoutchecked =="tc") 
                {
                jQuery('#CWP_tcblk1txt').show('');
                jQuery('#CWP_tcblk1txt').addClass('setShowing');
                jQuery('#CWP_tcblk1bgcolor').show('');
                jQuery('#CWP_tcblk1icon').show('');
                jQuery('#CWP_tcblk2txt').show('');
                jQuery('#CWP_tcblk2bgcolor').show('');
                jQuery('#CWP_tcblk2icon').show('');
                jQuery('#CWP_tcblk3txt').show('');
                jQuery('#CWP_tcblk3bgcolor').show('');
                jQuery('#CWP_tcblk3icon').show('');
                jQuery('#layoutpreview').css("background-image", "url('images/previews/3-column-layout.jpg')");
开发者_运维百科                alert ("we changed it");
                }
}

The HTML is being written as the WordPress theme takes in an array, and spits out radio buttons, here is the generated HTML code:

<div id="CWP_layout" class="cwp_input cwp_radio"> 

    <label for="CWP_layout">Select Layout</label> 

     <div class="radio_wrapper"> 


       <input type="radio" name="CWP_layout" value="tc" checked='checked' class="CWP_layout"/>Three Columns<br />  
       <input type="radio" name="CWP_layout" value="tr"  class="CWP_layout"/>Three Rows<br /> 
       <input type="radio" name="CWP_layout" value="is"  class="CWP_layout"/>Image Slider<br /> 
       <input type="radio" name="CWP_layout" value="iwc"  class="CWP_layout"/>Image with Content<br />             
       <input type="radio" name="CWP_layout" value="osi"  class="CWP_layout"/>One Single Image<br /> 
       <input type="radio" name="CWP_layout" value="fsev"  class="CWP_layout"/>Full Size Embedded Video<br /> 
       <input type="radio" name="CWP_layout" value="vwti"  class="CWP_layout"/>Video with Three Images<br /> 
        </div> 
        <small>Select the layout for the theme.</small><div class="clearfix"></div> 
     <div id="layoutpreviewwrap">Layout Of Selected Theme<div id="layoutpreview"></div><br />       
     </div>    
</div> 

Try changing this

jQuery('#layoutpreview').css("background-image", "url('images/previews/3-column-layout.jpg')");

to this

jQuery('#layoutpreview').css("background-image", "url('../images/previews/3-column-layout.jpg')");

Note the ../

You may need to add more than one of these if the file with the scripting is several "layers" away from the images folder in the hierarchy.