我正在扩展我的previous question。我正在尝试,如果其中一个单选按钮被选中,则其他应该默认取消选择。从show hide div中选择一个单选按钮
我已经加入这个尝试:
JS
function Show_Div(Div_id) {
if (!$(Div_id).is(':visible')) {
$(Div_id).prev().children().prop('checked', true);
$(Div_id).show(250);
} else {
$(Div_id).prev().children().prop('checked', false);
$(Div_id).hide(250);
}
}
function cbChange1(obj) {
var cb1 = document.getElementsByClassName("cb1");
for (var i = 0; i < cb1.length; i++) {
cb1[i].checked = false;
}
obj.checked = true;
}
HTML
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/flower-icon.png" alt="" onclick="Show_Div(Div_1)" width="100px">
<p>
<input type="radio" onclick="Show_Div(Div_1)" class="cb1" onchange="cbChange1(this)">Flower 1</p>
<div id="Div_1" style="display: none;">
Flower is pink.
</div>
<br/>
<br/>
<img src="http://www.clker.com/cliparts/0/d/w/v/V/p/pink-flower-md.png" alt="" onclick="Show_Div(Div_2)" width="100px">
<p>
<input type="radio" onclick="Show_Div(Div_2)" class="cb1" onchange="cbChange1(this)">Flower 2</p>
<div id="Div_2" style="display: none;">
Flower is orange.
</div>
但是通过上面的代码只是单选按钮是选择和取消选择。与单选按钮连接的显示和隐藏div不显示并隐藏在上面。
任何人都可以帮助我吗?
从'Show_Div(Div_2)代替'来'Show_Div('#Div_2' )' –
如果您可以点击它意味着你可以看到它,'.is(':visible')'应该总是返回'true'。那么,在测试你已经知道的事实是否有意义?我绝对错过了这里的东西! ......它应该是'#Div_2'...尽管我不是内联JS的粉丝。 – PeterKA
按照设计,当几个单选按钮具有与'name'属性相同的值时,一次只能选择一个。选择一个取消选择之前选择的任何一个。我们是否试图在这里重新发明轮子? – PeterKA