Question

我希望能够使用单选按钮和jQuery动态更改显示的div：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="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很差。

Answer 1

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

将desc类添加到描述div
您有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();
    });
});

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

Answer 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″>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/

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

Answer 5

这应该做你需要的事情

http://jsfiddle.net/7Ud6B/

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

Answer 7

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

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

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

此外，为您的复选框使用一个类，以便您的绑定变为类似

$('.carCheckboxes').click(function ...

Answer 8

.show()和.hide()的选择器未指向代码中的任何内容。

Fixed version in jsFiddle

根据单选按钮单击显示和隐藏div

8 个答案:

HTML

JQuery的