从组中选择一个单选按钮，并显示show div

Question

I am extending my previous question . I am trying now if one of the radio button is selected then other should de-select by default.

I have tried by adding this :

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>

But by above code only the radio buttons are select and de-select. The show and hide div which is connected with radio buttons is not show and hide by above.

Can anyone help me in this?

Answer 1

You're going about it wrong, it's actually quite simple. If two radio boxes are effectively answers to the same question then all you need to do is give both elements the same name . Then to handle showing and hiding of div 's you can do this -

 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>