Cambiar la imagen de fondo con el botón de opción

Question

Quiero cambiar la imagen de fondo de html con la selección del botón de opción. Cada botón de radio tiene una imagen diferente. Lo probé como:

 <input name="BG" id="wood" type="radio" value="" class="bgCollection" /> 
     <label for="radio">Wood</label> 

     <input name="BG" id="steel" type="radio" class="bgCollection"/> 
     <label for="radio">Steel</label> 

     <input name="BG" id="metal" type="radio" value="" class="bgCollection"/> 
     <label for="radio">Black metal</label> 

Jquery:

$(document).ready(function(){ 
      $(".bgCollection").change(
       function() 
      { 
     if($("input#wood").attr("checked")) 
        {$("html").css('backgroundImage','url(../images/wood.jpg)');} 
     if($("input#steel").attr("checked") 
        {$("html").css('backgroundImage','url(../images/BG-steel.jpg)');} 
     if($("input#metal").attr("checked")) 
        {$("html").css('backgroundImage','url(images/blackMetal.jpg)');} 
     }); 
    }); 

Pero de esta manera el fondo no está cambiando.

Answer 1

Aquí he hecho la demostración completa para el problema anterior. por favor revise el enlace de demostración.

Demostración:http://codebins.com/bin/4ldqp80

HTML:

<input name="BG" id="wood" type="radio" value="" class="bgCollection" /> 
<label for="radio"> 
    Wood 
</label> 

<input name="BG" id="steel" type="radio" class="bgCollection"/> 
<label for="radio"> 
    Steel 
</label> 

<input name="BG" id="metal" type="radio" value="" class="bgCollection"/> 
<label for="radio"> 
    Black metal 
</label> 

jQuery:

$(function() { 
    $(".bgCollection").change(function() { 
     if ($("#wood").is(":checked")) { 
      $("body").css('backgroundImage', "url('http://cdnimg.visualizeus.com/thumbs/7f/78/gfx,wood-7f78592c9a6ed3390492c560c5ac6fec_h.jpg')"); 
     } 
     if ($("#steel").is(":checked")) { 
      $("body").css('backgroundImage', "url('http://www.aroorsteelcorporation.com/full-images/stainless-steel-834007.jpg')"); 
     } 
     if ($("#metal").is(":checked")) { 
      $("body").css('backgroundImage', "url('http://i00.i.aliimg.com/photo/v0/468538622/Brushed_metal_texture_prepainted_metal.jpg')"); 
     } 
    }); 
}); 

Demostración:http://codebins.com/bin/4ldqp80

Answer 2

Usted lo está haciendo bien, pero tiene un error de sintaxis pequeña en su jQuery

if($("input#steel").attr("checked") 

Debe ser

if($("input#steel").attr("checked")) 

en cuenta que el soporte ) faltante al final

Working Fiddle

Pero una mejor forma de hacer va a utilizar esto para obtener el ID y luego aplicar el interruptor para comprobar el valor de poner el fondo

New Example

Answer 3

primer problema en su código

Su segundo si las condiciones son mal if($("input#steel").attr("checked") Cabe if($("input#steel").attr("checked")) el cierre de paréntesis está ausente aquí continuación, una cosa más que usted debe cambiar únicamente la siguiente etiqueta significa control no todo el html.

Así que utilice .next() función de la documentación de jQuery aquí http://api.jquery.com/next/

Probé este código en la prueba jsFiddle aquí: http://jsfiddle.net/FB37y/

Answer 4

hay) que falta en la siguiente línea de código:

if($("input#steel").attr("checked")) 
        {$("html").css('backgroundImage','url(../images/BG-steel.jpg)');}