प्रदर्शन छिपी सामग्री जब रेडियो बटन JQuery

Question

का उपयोग कर चेक किया गया है मैं दो चेक-बॉक्स

ABC 
XYZ 

जब एबीसी चेक किया गया है मैं दिखा रहा हूँ एबीसी सामग्री div और जब XYZ चेक किया गया है मैं xyz सामग्री div

दिखा रहा हूँ है केवल जब मैं एबीसी और XYZ रेडियो बटन पर क्लिक करें लगता है

सब कुछ अच्छा काम करता है डिफ़ॉल्ट रूप से एबीसी रेडियो बटन केवल मैं

मेरी आवश्यकता जब है इसके बारे में सामग्री हो रही क्लिक करने पर चेक किया जाता है, तो एबीसी सामग्री div दिखाई नहीं दे रहा रेडियो बटन चेक है एड मैं

क्लिक करने पर नहीं है कि विशेष जाँच रेडियो बटन की छिपी हुई सामग्री मिलना चाहिए

किसी ने मुझसे यह

http://jsfiddle.net/Qac6J/497/

एचटीएमएल

<form id='group'> 
    <div> 

     <label> 
      <input type="radio" name="group1" class="trigger" data-rel="abc" checked />ABC 
     </label> 

     <span class="abc content"> 
      <label> 
       <span>I belong to ABC</span> 
       <input type="button" value="ABC"/> 
      </label> 
     </span> 

    </div> 
    <br> 
    <div> 

     <label> 
      <input type="radio" name="group1" class="trigger" data-rel="xyz"/>XYZ 
     </label> 

     <span class="xyz content"> 
      <label> 
       <span>I belong to XYZ</span> 
       <input type="button" value="XYZ"/> 
      </label> 
     </span> 

    </div> 
</form> 

सीएसएस

को प्राप्त करने में मदद कर सकते हैं

.content 
{ 
    display: none; 
} 

JQuery

$('.trigger').change(function() 
{ 
    $('.content').hide(); 
    $('.' + $(this).data('rel')).show(); 
}); 

Answer 1

आप इस प्रकार :checked का भी उपयोग कर

$('.trigger').change(function() { 
    $('.content').hide(); 
    $('.' + $('.trigger:checked').data('rel')).show(); 
}).change(); //Show content on page load 

Fiddle

धन्यवाद कुछ संरचना परिवर्तन के साथ @tushar आप इसे प्राप्त कर सकते हैं की जाँच की रेडियो की rel मूल्य प्राप्त करने की आवश्यकता शुद्ध सीएसएस का उपयोग कर।

आप जाँच रेडियो बटन और भाई चयनकर्ता + चयन करने के लिए :checked का उपयोग अगले span और input भाई बहन चुनकर उन पर display: block; का उपयोग दिखाने के लिए कर सकते हैं।

.content { 
 
    display: none; 
 
} 
 
input:checked + span, 
 
input:checked + input { 
 
    display: block; 
 
}

<form id='group'> 
 
    <div> 
 
    <label> 
 
     <input type="radio" name="group1" class="trigger" data-rel="abc" checked />ABC 
 
     <span class="abc content"> 
 
     <span>I belong to ABC</span> 
 
     <input type="button" value="ABC" /> 
 
     </span> 
 
    </label> 
 
    </div> 
 
    <br> 
 
    <div> 
 
    <label> 
 
     <input type="radio" name="group1" class="trigger" data-rel="xyz" />XYZ 
 
     <span class="xyz content"> 
 
     <span>I belong to XYZ</span> 
 
     <input type="button" value="XYZ" /> 
 
     </span> 
 
    </label> 
 
    </div> 
 
</form>

Answer 2

सिर्फ अपने जे एस से .change(); निकालें

$('.trigger').change(function() { 
    $('.content').hide(); 
    $('.' + $('.trigger:checked').data('rel')).show(); 
}); 

Your updated Fiddle