显示当单选按钮使用JQuery
问题描述:
检查隐藏的内容我有两个的复选框显示当单选按钮使用JQuery
ABC
XYZ
ABC时检查我展示ABC的内容股利和XYZ时检查我展示XYZ内容DIV
如果默认ABC单选按钮被选中 ABC内容DIV没有显示只在点击我得到它的内容我的要求是,当只有当我在ABC和XYZ单选按钮点击想
一切的伟大工程单选按钮是检查编辑我应该得到那个特定的检查单选按钮的隐藏内容不点击
有人可以帮助我实现它
http://jsfiddle.net/Qac6J/497/
HTML
<form id='group'>
<div>
<label>
<input type="radio" name="group1" class="trigger" data-rel="abc" checked />ABC
</label>
<span class="abc content">
<label>
<span>I belong to ABC</span>
<input type="button" value="ABC"/>
</label>
</span>
</div>
<br>
<div>
<label>
<input type="radio" name="group1" class="trigger" data-rel="xyz"/>XYZ
</label>
<span class="xyz content">
<label>
<span>I belong to XYZ</span>
<input type="button" value="XYZ"/>
</label>
</span>
</div>
</form>
CSS
.content
{
display: none;
}
JQuery的
$('.trigger').change(function()
{
$('.content').hide();
$('.' + $(this).data('rel')).show();
});
答
你需要得到检查收音机的rel
值从而使用:checked
选择
$('.trigger').change(function() {
$('.content').hide();
$('.' + $('.trigger:checked').data('rel')).show();
}).change(); //Show content on page load
感谢@tushar随着一些结构的变化,你可以实现它使用纯CSS。
您可以使用:checked
来选择检查单选按钮,兄弟选择+
选择下一个span
和input
兄弟姐妹和使用他们display: block;
显现。
.content {
display: none;
}
input:checked + span,
input:checked + input {
display: block;
}
<form id='group'>
<div>
<label>
<input type="radio" name="group1" class="trigger" data-rel="abc" checked />ABC
<span class="abc content">
<span>I belong to ABC</span>
<input type="button" value="ABC" />
</span>
</label>
</div>
<br>
<div>
<label>
<input type="radio" name="group1" class="trigger" data-rel="xyz" />XYZ
<span class="xyz content">
<span>I belong to XYZ</span>
<input type="button" value="XYZ" />
</span>
</label>
</div>
</form>
答
只是从你的JS删除.change();
$('.trigger').change(function() {
$('.content').hide();
$('.' + $('.trigger:checked').data('rel')).show();
});
怎么样纯CSS,有一些结构的变化。 [**演示**](http://jsfiddle.net/tusharj/Qac6J/498/)。** Code:** _CSS_'input:checked + span,input:checked + input {display:block; }'_HTML_'' – Tushar
检查此拨弄太http://jsfiddle.net/mrvijayakumar/Qac6J/500/。如果你觉得没问题,就用这个。 :) –