Question

我有四个radio box这样：

<input type="radio" checked="checked" value="" name="display" style="">Home</input>
<input type="radio" value="" name="display" style="">Featured</input>
<input type="radio" value="" name="display" style="">Normal</input>
<input type="radio" value="" name="display" style="">Draft</input>

现在，我有三个DIV的精选，普通，草稿广播框，display:none是这样的：

<div id="Featured" style="display:none">Featured desc</div>
<div id="Normal" style="display:none">Normal desc</div>
<div id="Draft" style="display:none">Draft desc</div>

现在，我需要在click/selected每个单选按钮后显示div，使用相同的id使用jQuery。

NOTE: for Home radio box i dont need to any div.

Answer 1

请注意，输入是自动关闭的，并且不能包含文本，因此您必须将其更改为

<input type="radio" value="" name="display" />Featured

然后向DIV添加一个类，以便更容易定位

<div id="Featured" class="desc" style="display:none">Featured desc</div>

然后你可以做这样的事情

$('input[type="radio"]').on('change', function() {
    $('.desc').hide();
    $('#' + $.trim(this.nextSibling.nodeValue)).toggle(this.checked);
});

FIDDLE

使用Jquery使用单选框显示隐藏div

1 个答案: