21

我希望能够使用单选按钮和 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 。

4

8 回答 8

52

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

  1. 将desc类添加到您的描述 div
  2. 您有数字值，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();
    });
});
于 2011-05-09T18:41:54.320 回答
12

你非常接近。您的描述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/

于 2011-05-09T18:42:12.573 回答
4

这对我有用：

<!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>
于 2012-08-28T19:15:57.230 回答
3

在这里，您可以准确找到您正在寻找的内容。

<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″&gt;Radio2
</div>
 <br />
<div align="center" id="id_data" style="border:5″&gt;
  <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/

于 2012-01-23T10:16:22.933 回答
2

这应该做你需要的

http://jsfiddle.net/7Ud6B/

于 2011-05-09T18:43:27.053 回答
1

隐藏选择器不正确。我在页面加载时隐藏了块并显示了选定的值。我还更改了汽车 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>
于 2011-05-09T18:42:41.000 回答
1

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

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

if((test) == 2) { ... }

另外，为您的复选框使用一个类，这样您的绑定就变成了

$('.carCheckboxes').click(function ...
于 2011-05-09T18:44:50.767 回答
0

您的.show()and选择器.hide()没有指向代码中的任何内容。

jsFiddle 中的固定版本

于 2011-05-09T18:48:30.513 回答