jQuery - 如何使用無線電輸入顯示/隱藏元素？

Question

我下面的HTML結構：

<div id="options"> 
    <input type="radio" id="option0" value="option0" checked='checked' /><label>All</label> 
    <input type="radio" id="option1" value="option1" /><label>Option 1</label> 
    <input type="radio" id="option2" value="option2" /><label>Option 2</label> 
    <input type="radio" id="option3" value="option3" /><label>Option 3</label> 
</div> 

<p id="sentence1">This is an example of sentence 1</p> 
<p id="sentence2">This is an example of sentence 2</p> 
<p id="sentence3">This is an example of sentence 3</p> 

我想告訴所有的句子時，「全部」選項選中，並顯示＃SENTENCE1時「選項1」檢查..等等。

任何幫助，將不勝感激。

謝謝！ Rifki

Answer 1

試試這個：

<div id="options"> 
    <input type="radio" id="option0" value="option0" name="options" checked='checked' /><label>All</label> 
    <input type="radio" id="option1" value="option1" name="options" /><label>Option 1</label> 
    <input type="radio" id="option2" value="option2" name="options" /><label>Option 2</label> 
    <input type="radio" id="option3" value="option3" name="options" /><label>Option 3</label> 
</div> 

<p id="sentence1">This is an example of sentence 1</p> 
<p id="sentence2">This is an example of sentence 2</p> 
<p id="sentence3">This is an example of sentence 3</p> 

的Jquery：

$(function(){ 
var allSentences = $("p[id^=sentence]"); 
$("INPUT[type=radio]").click(function(){ 

    var _this = $(this); 
    if(_this.val()=="option0"){ 
      allSentences.show(); 
    }else{ 
     allSentences .hide(); 
     $("#"+_this.val().replace("option", "sentence")).show(); 
    } 

}); 
}); 

支票本的jsfiddle http://jsfiddle.net/7u3uS/3/