라디오 버튼으로 배경 이미지 변경

Question

라디오 버튼 선택으로 html의 backgroundImage를 변경하고 싶습니다. 모든 라디오 버튼마다 다른 이미지가 있습니다.

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

그러나 배경이 변경되지 이런 식으로.

Answer 1

여기 나는 위의 문제에 대한 데모를 완료했습니다. 데모 링크를 확인하십시오.

데모 :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')"); 
     } 
    }); 
}); 

데모 :,586,111,863,932 10

Answer 2

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

될해야 당신이 바로 그 일을하고 있지만 당신은 당신의 jQuery를에 작은 구문 오류가

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

주의 그 말

Working Fiddle에서 브래킷 ) 누락

그러나 일을 더 좋은 방법이 조건 인 경우

두 번째 코드에서 배경을

New Example

Answer 3

먼저 문제를 설정 값을 확인하기 위해 ID를 가져온 다음 스위치를 적용하려면이 옵션을 사용하는 것 wrong if($("input#steel").attr("checked") if($("input#steel").attr("checked")) 닫힌 괄호가 여기에 없다면 다음 레이블 만 바꾸면되는 한 가지 더 전체 HTML이 아니라는 것을 의미합니다.

그래서 여기 JQuery와 문서 http://api.jquery.com/next/

의 .next() 기능을 사용하여 여기 jsfiddle 시험에이 코드를 시도 : http://jsfiddle.net/FB37y/ 코드의 다음 줄에서 누락이

Answer 4

) :

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