Показывать несколько дивы при нажатии кнопки радио

Question

У меня есть радио-кнопки, которые содержащие изображения:

<input type="radio" name="site" id="au" value="1" /><label for="au"><img src="images/auditup.jpg" alt="Audit" /></label> 
<input type="radio" name="site" id="ma" value="2" /><label for="ma"><img src="images/repairup.jpg" alt="Maintenance" /></label> 
<input type="radio" name="site" id="tr" value="3" /><label for="tr"><img src="images/transportup.jpg" alt="Transport" /></label> 
<input type="radio" name="site" id="vi" value="4" /><label for="vi"><img src="images/visitup.jpg" alt="Visit" /></label> 

У меня есть 6 Div с содержанием

<div id="hygiene"> 
<p>some text</p> 
<input type="checkbox" name="achygiene" value="1" id="achygiene" /><label for="achygiene">I agree to the terms and conditions.</label> 
</div> 

<div id="security"> 
<p>some text</p> 
<input type="checkbox" name="acsecurity" value="1" id="acsecurity" /><label for="acsecurity">I agree to the terms and conditions.</label> 
</div> 

<div id="terms"> 
<p>some text</p> 
<input type="checkbox" name="acterms" value="1" id="acterms" /><label for="acterms">I agree to the terms and conditions.</label> 
</div> 

<div id="defence"> 
<p>some text</p> 
<input type="checkbox" name="acdefence" value="1" id="acdefence" /><label for="acdefence">I agree to the terms and conditions.</label> 
</div> 

<div id="safety"> 
<p>some text</p> 
<input type="checkbox" name="acsafety" value="1" id="acsafety" /><label for="acsafety">I agree to the terms and conditions.</label> 
</div> 

Что я хотел бы иметь то, когда кто-то тикает радиокнопку с идентификатором «au», что (fe) Div гигиена, условия, защита показывается. , но когда кто-то щелкает радиокнопкой с идентификатором «ma», делятся (f.e.) гигиена и безопасность. и для другого переключателя все дисплеи отображаются. Это может быть не случайно! поэтому я должен установить, какие divs откроются, когда вы помечаете переключатель. Имейте в виду, что некоторые переключатели имеют одинаковые div's

Я не очень хорошо разбираюсь в jQuery, поэтому я прошу помочь здесь.

EDIT: я нашел много примеров на стеке, но не какой-либо пример с множественным ДИВ-х

Например, этот код:

$(function(){ 
    $(':radio').click(function() { 
     $('#' + $(this).attr('class')).fadeIn().siblings('div').hide(); 
    }) 
    .filter(':checked').click();//trigger the click event 
});​ 

Я понимаю, как это работает, но не знаю, как это сделать, если имя идентификатора и/или классов не может быть одинаковым.

Answer 1

Вы можете использовать данных- * атрибут в каждом радио указать Div, чтобы отображаться, как

<input type="radio" name="site" id="au" value="1" class="trigger" data-target="#hygiene, #security"/> 
<label for="au"> 
    <img src="images/auditup.jpg" alt="Audit" /> 
</label> 
<input type="radio" name="site" id="ma" value="2" class="trigger" data-target="#safety, #defence"/> 
<label for="ma"> 
    <img src="images/repairup.jpg" alt="Maintenance" /> 
</label> 
<input type="radio" name="site" id="tr" value="3" class="trigger" data-target="#hygiene, #defence"/> 
<label for="tr"> 
    <img src="images/transportup.jpg" alt="Transport" class="trigger" data-target="#hygiene, #security"/> 
</label> 
<input type="radio" name="site" id="vi" value="4" class="trigger" data-target="#terms, #safety"/> 
<label for="vi"> 
    <img src="images/visitup.jpg" alt="Visit" /> 
</label> 
<div id="hygiene" class="contents"> 
    <p>some text hygiene</p> 
    <input type="checkbox" name="achygiene" value="1" id="achygiene" /> 
    <label for="achygiene">I agree to the terms and conditions.</label> 
</div> 
<div id="security" class="contents"> 
    <p>some text security</p> 
    <input type="checkbox" name="acsecurity" value="1" id="acsecurity" /> 
    <label for="acsecurity">I agree to the terms and conditions.</label> 
</div> 
<div id="terms" class="contents"> 
    <p>some text terms</p> 
    <input type="checkbox" name="acterms" value="1" id="acterms" /> 
    <label for="acterms">I agree to the terms and conditions.</label> 
</div> 
<div id="defence" class="contents"> 
    <p>some text defence</p> 
    <input type="checkbox" name="acdefence" value="1" id="acdefence" /> 
    <label for="acdefence">I agree to the terms and conditions.</label> 
</div> 
<div id="safety" class="contents"> 
    <p>some text safety</p> 
    <input type="checkbox" name="acsafety" value="1" id="acsafety" /> 
    <label for="acsafety">I agree to the terms and conditions.</label> 
</div> 

затем

jQuery(function() { 
    var $contents = $('.contents').hide(); 
    $('.trigger').change(function() { 
     $contents.hide(); 
     $($(this).data('target')).show() 
    }) 
}) 

Демо: Fiddle

Answer 2

Присвойте каждому классу класс, обозначающий переключатель, который должен его показывать. Элементы могут иметь несколько классов, и им не нужно присваивать им стили CSS.

HTML:

<div id="hygiene" class="au ma"> 

JQuery:

$('input[name=site]').on('click', function(e) { 
    var id = this.id; 
    $('div.'+id).show().siblings(':not(.'+id+')').hide(); 
}); 

http://jsfiddle.net/mblase75/mjLkR/

Вам может потребоваться настроить селекторы в зависимости от того, как структурирован ваш полный HTML.