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

我有多个图像和它们各自的单选按钮。通过单击图像或单选按钮，将显示它们各自的show和hide 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>

---

将字符串传递给函数时，向添加单引号。您可以尝试以下方式：

HTML 请尝试下面的代码

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

功能显示分区（分区id）{
var divid=“#”+Div_id；
var inpcls=“.”+分区id；
if（false==$（divid）.is（':visible'））{
$（divid）.show（250）；
$（inpcls）.prop（“选中”，为真）；
}
否则{
$（divid）.hide（250）；
$（inpcls）.prop（“选中”，false）；
}
}

花1

花是粉红色的。





花2

花是橙色的。

收音机是前一相邻元件的子元件

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（）

选择图像前面的

元素

.children（）

选择子元素（即本例中的单选按钮）

如果向

添加其他元素，则可能需要添加其他选择器（例如first（）、filter（））以深入到输入元素

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

这种方法的优点是…

---

您不必在代码中添加任何额外的#id标记。因此，如果您计划重复此模式，您将少担心一个细节。

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

正文{
填充物：5px；
}
标签{
字体大小：粗体；
}
输入[类型=文本]{
宽度：20em
}
p{
利润率：1米0；
}

花1



花是粉红色的。





花2



花是橙色的。
功能显示分区（分区id）{
$（“.radio_btns”）.prop（“选中”，假）；
$（“.divs”）.hide（250）；
if（！$（“#”+Div_id）.is（“：可见”）{
$（“#”+Div_id）.show（250）；
$（“#Radio_uu”+Div_uid）.prop（“选中”，true）；
}否则{
$（“#”+Div_id）.hide（250）；
$（“#Radio_uu”+Div_uid）.prop（“选中”，false）；
}
}

通过将Id指定为当前对应收音机的标题来获取div Id，并使用toggle

$("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"));
});

---

这是

$（':radio'）。on（'change'，function（）{$（':radio:checked'）。next（'div'）。show（）；}）@Tushar:在上面一行，我应该保留JS部分吗？我尝试了同样的方法，但没有成功。我已经编辑了你的答案，因为第一次修改的结果将被定性为“不是答案”。只发布一个指向外部站点的链接作为答案是没有用的，所以下次请记住这一点。@Geethanjali B L:如何在多个单选按钮中一次只设置一个单选按钮值为真？您能在回答中添加这个吗？将class=“radio_btns”添加到HTML中的所有单选按钮，在Show_Div（）函数的开头，通过$（“.radio_btns”）.prop（“checked”，false），然后你可以通过Id设置/取消设置你点击的单选按钮。@Evan Plaice:我如何在多个单选按钮中一次只设置一个单选按钮值为真？你能在你的答案中加上这个吗？@kiran我想你在
.children（）
和
.prop（）
@Evan Plaice之间加上
.find（“[value='value of radio button beging']”）和
.children（）
”
：对于我上面的HTML代码，对于两人组，我怎样才能添加它，使得一次只能有一个单选按钮显示文本？@kiran这不是你在这里问的问题。话虽如此，您需要将这两个元素绑定在一起。如果你在一个新问题中问这个问题，我会把答案贴出来。
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);
  }
}

$("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"));
});