특정 div를 표시하는 라디오 버튼 선택

Question

JavaScript 지식이 부족한 것에 대해 미리 사과드립니다.

나는 두 개의 라디오 입력 필드 그룹 인 "States"그룹과 "Structures"그룹을 가지고 있습니다. 4 가지 가격 책정 구조가 있으며 각 가격 구조는 각 주마다 다릅니다.

관련 가격 정보가 포함 된 div를 표시하려면 상태 및 선호 가격 구조를 선택해야합니다. 또한 사용자가 가격을 비교하기 위해 상태와 구조를 쉽게 전환 할 수 있기를 바랍니다.

여기서는 다소 효과가 있습니다. http://jsfiddle.net/HCreate/L6srku90/ 하지만이 방법은 정말 길어진 해결책입니다. 다른 상태를 선택하면 구조를 다시 선택해야하기 때문에 상태와 구조를 전환하는 기능이 제대로 작동하지 않습니다. 이는 이상적이지 않습니다.

나는 여기서 더 단순화 된 것을 만들려고 시도했다 : http://jsfiddle.net/HCreate/65t6mnd5/ 그러나 나는 그것을 얻을 수 없었다. 나는 이것이 최선의 방법이라고 확신하지 못한다.

HTML

<p><strong>What State</strong></p> 
     <input type="radio" name="groupa" class="wa state" value="wa"/> WA 
     <input type="radio" name="groupa" class="nt state" value="nt"/> NT 
     <input type="radio" name="groupa" class="sa state" value="sa"/> SA 
     <input type="radio" name="groupa" class="qld state" value="qld"/> QLD 
     <input type="radio" name="groupa" class="nsw state" value="nsw"/> NSW 
     <input type="radio" name="groupa" class="vic state" value="vic"/> VIC 
     <input type="radio" name="groupa" class="tas state" value="tas"/> TAS 

<p><strong>What Structure</strong></p> 
     <input type="radio" name="groupb" class="S1 structure" value="S1"/> Structure 1 
     <input type="radio" name="groupb" class="S2 structure" value="S2"/> Structure 2 
     <input type="radio" name="groupb" class="S3 structure" value="S3" /> Structure 3 
     <input type="radio" name="groupb" class="S4 structure" value="S4"/> Structure 4 

<p>&nbsp;</p> 

    <div class="waS1 content"><p>WA Structure 1</p><p><em>Pricing Table</em></p></div> 
    <div class="waS2 content"><p>WA Structure 2</p><p><em>Pricing Table</em></p></div> 
    <div class="waS3 content"><p>WA Structure 3</p><p><em>Pricing Table</em></p></div> 
    <div class="waS4 content"><p>WA Structure 4</p><p><em>Pricing Table</em></p></div> 

    <div class="ntS1 content"><p>NT Structure 1</p><p><em>Pricing Table</em></p></div> 
    <div class="ntS2 content"><p>NT Structure 2</p><p><em>Pricing Table</em></p></div> 
    <div class="ntS3 content"><p>NT Structure 3</p><p><em>Pricing Table</em></p></div> 
    <div class="ntS4 content"><p>NT Structure 4</p><p><em>Pricing Table</em></p></div> 

    <div class="saS1 content"><p>SA Structure 1</p><p><em>Pricing Table</em></p></div> 
    <div class="saS2 content"><p>SA Structure 2</p><p><em>Pricing Table</em></p></div> 
    <div class="saS3 content"><p>SA Structure 3</p><p><em>Pricing Table</em></p></div> 
    <div class="saS4 content"><p>SA Structure 4</p><p><em>Pricing Table</em></p></div> 

    <div class="qldS1 content"><p>QLD Structure 1</p><p><em>Pricing Table</em></p></div> 
    <div class="qldS2 content"><p>QLD Structure 2</p><p><em>Pricing Table</em></p></div> 
    <div class="qldS3 content"><p>QLD Structure 3</p><p><em>Pricing Table</em></p></div> 
    <div class="qldS4 content"><p>QLD Structure 4</p><p><em>Pricing Table</em></p></div> 

    <div class="nswS1 content"><p>NSW Structure 1</p><p><em>Pricing Table</em></p></div> 
    <div class="nswS2 content"><p>NSW Structure 2</p><p><em>Pricing Table</em></p></div> 
    <div class="nswS3 content"><p>NSW Structure 3</p><p><em>Pricing Table</em></p></div> 
    <div class="nswS4 content"><p>NSW Structure 4</p><p><em>Pricing Table</em></p></div> 

    <div class="vicS1 content"><p>VIC Structure 1</p><p><em>Pricing Table</em></p></div> 
    <div class="vicS2 content"><p>VIC Structure 2</p><p><em>Pricing Table</em></p></div> 
    <div class="vicS3 content"><p>VIC Structure 3</p><p><em>Pricing Table</em></p></div> 
    <div class="vicS4 content"><p>VIC Structure 4</p><p><em>Pricing Table</em></p></div> 

    <div class="tasS1 content"><p>TAS Structure 1</p><p><em>Pricing Table</em></p></div> 
    <div class="tasS2 content"><p>TAS Structure 2</p><p><em>Pricing Table</em></p></div> 
    <div class="tasS3 content"><p>TAS Structure 3</p><p><em>Pricing Table</em></p></div> 
    <div class="tasS4 content"><p>TAS Structure 4</p><p><em>Pricing Table</em></p></div> 

SCRIPT

function() { 
    $('.content').hide(); 
    if ('.state').checked = true; 
    $('.'+$('.state').val()+$('.structure').val()).show(); 
} 

CSS

.content { 
    display: none; 
} 

어떤 도움을 감사하겠습니다. 건배!

Answer 1

함수 이름을 지정해야하고 코드를 발생시키는 이벤트가 없기 때문에 코드가 작동하지 않습니다.

난 그냥 당신과 아이디어를 제공하기 위해, 다음과 같은 somethink 할 것 :

$('input[name="groupb"]').click(function(){ 

    if($('input[name="groupa"]').is(':checked')) 
     $('.'+$('.state:checked')+$('.structure:checked').val()).show(); 

})