jQuery-如何使用无线输入显示/隐藏元素?
我有以下html结构:jQuery-如何使用无线输入显示/隐藏元素?,jquery,Jquery,我有以下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> &
<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>
全部的
选择1
选择2
选择3
这是句子1的一个例子
这是句子2的一个例子
这是第3句的一个例子
我想在选中“全部”选项时显示所有句子,并在选中“选项1”时显示#句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>
检查这个jsfiddle
$(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();
}
});
});