點擊單選按鈕

Question

時顯示多個div我有一個是包含圖像的一些單選按鈕：

<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 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」表示衛生，術語，防禦正在顯示。 但是當有人在點擊帶有「ma」的單選按鈕時，會顯示divs（f.e.）的衛生和安全。另一個單選按鈕顯示所有的div。它可能不是隨機的！所以我必須設置當您勾選單選按鈕時將打開的div。請記住，一些單選按鈕有相同的分區

我不擅長進入jQuery，所以這就是爲什麼我在這裏尋求幫助。

編輯： 我已經找到了很多關於堆棧的例子，但不能與多個div的

例如該代碼的任何例子：

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

我理解它的工作原理，但不認識路如果這個ID和/或類的名字不能相同，就應該這樣做

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

給每個div命名一個應該顯示它的單選按鈕。元素可以有多個類，並且不需要爲其分配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是如何組織的調整選擇。