单击图像或单选按钮时显示和隐藏 div

Question

我有多个图像及其各自的单选按钮。通过单击图像或单选按钮，它们各自的显示和隐藏 div 正在显示。

但是我无法实现：

当文本显示时，点击图片相应的单选按钮也应该select（值为真）
当文本隐藏时，单选按钮的值应为 false。

我目前的代码如下：

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)">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)">Flower 2</p>
<div id="Div_2" style="display: none;">
  Flower is orange.
</div>

JavaScript代码

function Show_Div(Div_id) {
  if (false == $(Div_id).is(':visible')) {
    $(Div_id).show(250);
  } else {
    $(Div_id).hide(250);
  }
}

Answer 1

将字符串传递给函数时添加单引号。你可以试试：

HTML

 <input type="radio" onclick="Show_Div('Div_1')">Flower 1</p>

JavaScript

function Show_Div(Div_id) {
    $('#'+Div_id).toggle(250);
}

Answer 2

试试下面的代码。

<script>
    function Show_Div(Div_id) {
        var divid = "#" + Div_id;
        var inpcls = "." + Div_id;
        if (false == $(divid).is(':visible')) {
            $(divid).show(250);
            $(inpcls).prop("checked", true);
        }
        else {
            $(divid).hide(250);
            $(inpcls).prop("checked", false);
        }
    }
</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" class='Div_1' onclick="Show_Div('Div_1')">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" class='Div_2' onclick="Show_Div('Div_2')">Flower 2</p>
<div id="Div_2" style="display: none;">
    Flower is orange.
</div>

Answer 3

radio 是前一个相邻元素的子元素。

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);
  }
}

.prev() 选择图像之前的 <p> 元素
.children() 选择子元素（即本例中的单选按钮）

如果您向 <p> 添加其他元素，您可能需要添加其他选择器（例如 first()、filter()）以深入到输入元素。

这种方法的优点是...

您不必在代码中添加任何额外的#id 标签。因此，如果您打算重复此模式，您就可以少担心一个细节。

Answer 4

将 id 作为字符串而不是 HTML 对象传递，将 id 用于单选按钮以 set/unset 它们的值。要一次设置单个单选按钮并显示相应的 div，请为 div 和单选按钮添加 class，隐藏 div 并将单选按钮设置为 false在 Show_Div 函数的第一行。

body {
    padding: 5px;
}

label {
    font-weight: bold;
}

input[type=text] {
    width: 20em
}

p {
    margin: 1em 0 0;
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<body>

<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" id="Radio_Div_1" class="radio_btns" onclick="Show_Div('Div_1')">&nbsp;Flower 1</p>
<div id="Div_1" class="divs" style="display: none;"><br>
  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" id="Radio_Div_2" class="radio_btns" onclick="Show_Div('Div_2')">&nbsp;Flower 2</p>
<div id="Div_2" class="divs" style="display: none;"><br>
  Flower is orange.
</div>
</body>
<script>
 function Show_Div(Div_id) {
      $(".radio_btns").prop( "checked", false );
    $(".divs").hide(250);
   if (!$("#"+Div_id).is(':visible')) {
     $("#"+Div_id).show(250);
     $( "#Radio_"+Div_id).prop( "checked", true );
   } else {
     $("#"+Div_id).hide(250);
     $( "#Radio_"+Div_id).prop( "checked", false );
   }
 }

</script>

Answer 5

通过将 Id 指定为当前收音机的标题来获取 div Id，并使用切换。

$("a").click(function(event) {
   $(this).find('input[type="radio"]').prop("checked", true);
   $('input[type="radio"]').change();
});
$('input[name="group"]').change(function() {
  var divId = $(this).attr('title');
  $('#'+divId).toggle($(this).is(":checked"));
});

这是Code

单击图像或单选按钮时显示和隐藏 div

Show and hide div on clicking image or radio button

html

javascript

jquery

jquery-selectors

radio-button

JavaScript代码

HTML

JavaScript