it-swarm.com.de

einblenden und Ausblenden von Divs basierend auf dem Klicken auf das Optionsfeld

Ich möchte in der Lage sein, dynamisch zu ändern, welche Divs mithilfe von Radio Button und jQuery - HTML angezeigt werden: 

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

und die jQuery: 

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

Das macht nichts, die Divs zeigen immer. Ich bin mir sicher, dass dies einfach ist, aber ich bin bei jQuery schlecht. 

15
Kiksy

Sie sind auf dem richtigen Weg, haben aber zwei Dinge vergessen:

  1. fügen Sie die desc-Klassen zu Ihren Beschreibungsabschnitten hinzu
  2. Sie haben numerische Werte für input, aber Text für id.

Ich habe das obige behoben und auch eine Zeile zu hide() der dritten description div hinzugefügt.

Schau es in Aktion an - 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();
    });
});
39
Jason McCreary

Du warst ziemlich nahe. Ihre Beschreibung div-Tags haben keine .desc-Klasse definiert. Für Ihr Szenario sollten Sie das Optionsfeld haben, das der div entspricht, die Sie anzeigen möchten.

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

arbeitsbeispiel: http://jsfiddle.net/hunter/tcDtr/

10
hunter

Hier finden Sie genau das, wonach Sie suchen.

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

Das ist es..

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

3
Milap

Das hat für mich funktioniert:

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

Das sollte tun, was Sie brauchen 

http://jsfiddle.net/7Ud6B/

Die Hide-Auswahl war falsch. Ich habe die Blöcke beim Laden der Seite ausgeblendet und den ausgewählten Wert angezeigt. Ich habe auch die Auto-IDs geändert, um das Anhängen des Optionsfeldes und das Erstellen der richtigen ID-Auswahl zu erleichtern.

<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>
1
Tim Hobbs

Mit $("div.desc").hide(); versuchen Sie im Wesentlichen ein div mit dem Klassennamen desc zu verbergen. Welche nicht existiert Mit $("#"+test).show(); versuchen Sie, entweder ein div mit der ID #2 oder #3 anzuzeigen. Dies sind illegale IDs in HTML (können nicht mit einer Zahl beginnen), obwohl sie in vielen Browsern funktionieren. Sie existieren jedoch nicht. 

Ich würde die beiden divs in carDiv2 und carDiv3 umbenennen und dann andere Logik verwenden, um sie auszublenden oder anzuzeigen.

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

Verwenden Sie auch eine Klasse für Ihre Checkboxen, damit Ihre Bindung in etwa so aussieht 

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

Ihr Selektor für .show() und .hide() zeigt auf nichts im Code.

Feste Version in jsFiddle

0
ShaneBlake