रेडियो बटन

Question

के साथ पृष्ठभूमि छवि बदलें मैं पृष्ठभूमि बटन चयन के साथ पृष्ठभूमि का पृष्ठभूमि बदलना चाहता हूं। प्रत्येक रेडियो बटन में अलग-अलग छवि होती है।

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

डेमो:http://codebins.com/bin/4ldqp80

Answer 2

आप इसे सही कर रहे हैं, लेकिन आप अपने jQuery में एक छोटा सा syntax त्रुटि

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

होना चाहिए

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

सूचना है कि अंत

Working Fiddle पर ब्रैकेट ) लापता

लेकिन ऐसा करने का एक बेहतर तरीका यह का उपयोग किया जाएगा आईडी और फिर स्विच को लागू करने के लिए जाँच करने के लिए

आपकी दूसरी अपने कोड में पृष्ठभूमि

New Example

Answer 3

सबसे पहले समस्या सेट करने के लिए करता है, तो स्थिति है गलत 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)');}