Question

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

但我无法实现：

单击图像时，相应的单选按钮也应在文本显示时选择（值为true）
当文本隐藏时，单选按钮的值应为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

将id作为字符串而不是HTML对象传递，使用单选按钮设置/取消设置其值。要一次设置单个单选按钮并显示相应的div，请为div和单选按钮添加类，隐藏div并在Show_Div函数的第一行将radio设置为false。

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 2

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

HTML

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

的JavaScript

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

Answer 3

请尝试以下代码。

<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 4

收音机是前一个相邻元素的孩子。

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>添加其他元素，则可能需要添加其他选择器（ex first（），filter（））以深入查看输入元素。

这种方法的优点是......

您不必在代码中添加任何其他#id标记。所以，如果你打算重复这种模式，你可以减少一个细节。

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

JavaScript代码

5 个答案:

HTML

的JavaScript