select 显示隐藏的组中的一个单选按钮 div

Question

我正在延长我的。我现在正在尝试，如果其中一个单选按钮是 selected，那么默认情况下其他单选按钮应该取消 select。

我试过添加这个：

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>

但是通过上面的代码只有单选按钮是select和de-select。与单选按钮相关的显示和隐藏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>

select 显示隐藏的组中的一个单选按钮 div

select one radio button from group with the show hide div

html

javascript

jquery

radio-group

jquery-selectors