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

show and hide divs based on radio button click

提问by Kiksy

I want to be able to dynamically change what divs are show using radio button and jQuery - HTML:

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

and the jQuery:

和 jQuery：

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

This does nothing , the divs always show. Im sure this is simple, but Im poor at jQuery .

这什么都不做，divs 总是显示。我确定这很简单，但我不擅长 jQuery 。

回答by Jason McCreary

You're on the right track, but you forgot two things:

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

1. add the descclasses to your description divs
2. You have numeric values for the inputbut text for the id.

1. 将desc类添加到您的描述 div
2. 您有 的数值，input但是 的文本id。

I have fixed the above and also added a line to initially hide()the thirddescription div.

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

Check it out in action - http://jsfiddle.net/VgAgu/3/

在行动中检查它 - http://jsfiddle.net/VgAgu/3/

HTML

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

回答by hunter

You were pretty close. You're description divtags didn't have the .descclass defined. For your scenario you should have the radio button value equal to the divthat you're trying to show.

你非常接近。你的描述div标签没有.desc定义类。对于您的方案，您应该让单选按钮值等于div您要显示的值。

HTML

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

jQuery

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

---

---

working example: http://jsfiddle.net/hunter/tcDtr/

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

回答by Milap

Here you can find exactly what you are looking for.

在这里，您可以准确地找到您要找的东西。

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

Thats it..

就是这样..

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

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

回答by amit03

This worked for me:

这对我有用：

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

回答by Fareesh Vijayarangam

This should do what you need

这应该做你需要的

http://jsfiddle.net/7Ud6B/

http://jsfiddle.net/7Ud6B/

回答by lucian303

With $("div.desc").hide();you are essentially trying to hide a div with a class name of desc. Which doesn't exist. With $("#"+test).show();you are trying to show either a div with an id of #2or #3. Those are illegal id's in HTML (can't start with a number), though they will work in many browsers. However, they don't exist.

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

I'd rename the two divs to carDiv2and carDiv3and then use different logic to hide or show.

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

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

Also, use a class for your checkboxes so your binding becomes something like

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

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

回答by Tim Hobbs

The hide selector was incorrect. I hid the blocks at page load and showed the selected value. I also changed the car div id's to make it easier to append the radio button value and create the proper id selector.

隐藏选择器不正确。我在页面加载时隐藏了块并显示了选定的值。我还更改了汽车 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>

回答by ShaneBlake

Your selector for the .show()and .hide()are not pointing to anything in the code.

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

Fixed version in jsFiddle

jsFiddle 中的固定版本