從show hide div中選擇一個單選按鈕

Question

我正在擴展我的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> 

但是通過上面的代碼只是單選按鈕是選擇和取消選擇。與單選按鈕連接的顯示和隱藏div不顯示並隱藏在上面。

任何人都可以幫助我嗎？

Answer 1

你錯了，其實很簡單。如果兩個無線電盒實際上是回答對相同的問題，那麼你所需要做的就是給這兩個元素相同的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>