我正在延长我的previous question。我现在正在尝试,如果选择了一个单选按钮,那么其他按钮应默认取消选择。
我试过添加这个:
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>
但是通过上面的代码,只有选择和取消选择单选按钮。与单选按钮连接的show和hide div不会在上面显示和隐藏。
有人可以帮助我吗?
答案 0 :(得分:0)
你说错了,实际上很简单。如果两个无线电盒有效回答到同一个问题,那么你需要做的就是给两个元素提供相同的name
。然后,为了处理div
的显示和隐藏,你可以这样做 -
function Show_Div(Div_id, element) {
$("input[name='radio1']").not(element).parent().next('div').hide(250);
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);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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" name="radio1" onclick="Show_Div('#Div_1')" class="cb1" >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" name="radio1" onclick="Show_Div('#Div_2')" class="cb1" >Flower 2</p>
<div id="Div_2" style="display: none;">
Flower is orange.
</div>