根据单选按钮单击显示和隐藏 div [重复]

Posted 2023-03-27

技术标签:

【中文标题】根据单选按钮单击显示和隐藏 div [重复]【英文标题】：show and hide divs based on radio button click [duplicate] 【发布时间】：2011-08-21 21:48:39 【问题描述】：

我希望能够使用单选按钮和 jQuery - html 动态更改显示的 div：

  <div id="myRadioGroup">

2 Cars<input type="radio" name="cars" checked="checked" value="2"  />

3 Cars<input type="radio" name="cars" value="3" />

<div id="twoCarDiv">
2 Cars Selected
</div>
<div id="threeCarDiv">
3 Cars
</div>
</div>

和 jQuery：

     <script>
$(document).ready(function() 
    $("input[name$='cars']").click(function() 
        var test = $(this).val();
        $("div.desc").hide();
        $("#"+test).show();
    ); 
);
</script>

这无济于事，div 总是显示。我确定这很简单，但我不擅长 jQuery 。

【问题讨论】：

【参考方案1】：

你在正确的轨道上，但你忘记了两件事：

desc

input

id

我已经修复了上述问题，并在最初的hide() 第三个描述 div 中添加了一行。

查看实际情况 - http://jsfiddle.net/VgAgu/3/

HTML

<div id="myRadioGroup">
    2 Cars<input type="radio" name="cars" checked="checked" value="2"  />
    3 Cars<input type="radio" name="cars" value="3" />

    <div id="Cars2" class="desc">
        2 Cars Selected
    </div>
    <div id="Cars3" class="desc" style="display: none;">
        3 Cars
    </div>
</div>

jQuery

$(document).ready(function() 
    $("input[name$='cars']").click(function() 
        var test = $(this).val();

        $("div.desc").hide();
        $("#Cars" + test).show();
    );
);

【讨论】：

伙计，在我的例子中，它会根据所选的单选按钮显示一些需要填写的输入。我的问题是如何不需要隐藏输入？【参考方案2】：

你已经很接近了。您的描述 div 标签没有定义 .desc 类。对于您的方案，您的单选按钮值应等于您尝试显示的 div。

HTML

<div id="myRadioGroup">

    2 Cars<input type="radio" name="cars" checked="checked" value="twoCarDiv"  />

    3 Cars<input type="radio" name="cars" value="threeCarDiv" />

    <div id="twoCarDiv" class="desc">
        2 Cars Selected
    </div>
    <div id="threeCarDiv" class="desc">
        3 Cars Selected
    </div>
</div>

jQuery

$(document).ready(function() 
    $("div.desc").hide();
    $("input[name$='cars']").click(function() 
        var test = $(this).val();
        $("div.desc").hide();
        $("#" + test).show();
    );
);

工作示例：http://jsfiddle.net/hunter/tcDtr/

【讨论】：

这是非常有用的提示。感谢您提供这个不错的解决方案。这仍然不会在页面加载时显示输入为checked 的 div。只有收音机显示为选中状态。【参考方案3】：

这对我有用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Untitled Document</title>
        <script type="text/javascript">
            function show(str)
                document.getElementById('sh2').style.display = 'none';
                document.getElementById('sh1').style.display = 'block';
            
            function show2(sign)
                document.getElementById('sh2').style.display = 'block';
                document.getElementById('sh1').style.display = 'none';
            
        </script>
    </head>

    <body>
        <p>
            <input type="radio" name="r1" id="e1" onchange="show2()"/>&nbsp;I Am New User&nbsp;&nbsp;&nbsp;
            <input type="radio" checked="checked" name="r1" onchange="show(this.value)"/>&nbsp;Existing Member
        </p>
        <div id="sh1">Hello There !!</div>
        <p>&nbsp;</p>
        <div id="sh2" style="display:none;">Hey Watz up !!</div>
    </body>
</html>

【讨论】：

【参考方案4】：

在这里，您可以准确找到所需的内容。

<div align="center">
  <input type="radio" name="name_radio1" id="id_radio1" value="value_radio1">Radio1
  <input type="radio" name="name_radio1″ id="id_radio2" value="value_radio2″>Radio2
</div>
 <br />
<div align="center" id="id_data" style="border:5″>
  <div>this is div 1</div>
  <div>this is div 2</div>
  <div>this is div 3</div>
  <div>this is div 4</div>
</div>
<script src="jquery.js"></script>
<script>
 $(document).ready(function() 
 // show the table as soon as the DOM is ready
 $("#id_data").show();
 // shows the table on clicking the noted link
  $("#id_radio1").click(function() 
   $("#id_data").show("slow");
  );
 // hides the table on clicking the noted link
   $("#id_radio2").click(function() 
   $("#id_data").hide("fast");
   );
 );

  $(document).ready(function() – When document load.
  $("#id_data").show(); – shows div which contain id #id_data.
  $("#id_radio1").click(function() – Checks  radio button is clicked containing id #id_radio1.
  $("#id_data").show("slow"); – shows div containing id #id_data.
  $("#id_data").hide("fast"); -hides div when click on radio button containing id #id_data.

就是这样..

http://patelmilap.wordpress.com/2011/02/04/show-hide-div-on-click-using-jquery/

【讨论】：

【参考方案5】：

这应该可以满足您的需要

http://jsfiddle.net/7Ud6B/

【讨论】：

【参考方案6】：

隐藏选择器不正确。我在页面加载时隐藏了块并显示了选定的值。我还更改了汽车 div id，以便更轻松地附加单选按钮值并创建正确的 id 选择器。

<div id="myRadioGroup">
  2 Cars<input type="radio" name="cars" checked="checked" value="2"  />
  3 Cars<input type="radio" name="cars" value="3" />
  <div id="car-2">
  2 Cars
  </div>
  <div id="car-3">
  3 Cars
  </div>
</div>

<script type="text/javascript">
$(document).ready(function() 
  $("div div").hide();
  $("#car-2").show();
  $("input[name$='cars']").click(function() 
      var test = $(this).val();
      $("div div").hide();
      $("#car-"+test).show();
  ); 
);
</script>

【讨论】：

【参考方案7】：

使用$("div.desc").hide();，您实际上是在尝试隐藏类名为desc 的div。哪个不存在。使用$("#"+test).show();，您试图显示一个id 为#2 或#3 的div。这些是 HTML 中的非法 id（不能以数字开头），尽管它们可以在许多浏览器中使用。但是，它们不存在。

我会将这两个 div 重命名为 carDiv2 和 carDiv3，然后使用不同的逻辑来隐藏或显示。