web-dev-qa-db-fra.com

afficher et masquer les divs en fonction du clic du bouton radio

Je veux être capable de changer dynamiquement ce que les divs sont montrer en utilisant le bouton radio et jQuery - 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>

et le jQuery: 

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

Cela ne fait rien, les divs montrent toujours. Je suis sûr que c'est simple, mais je suis pauvre à jQuery. 

jqueryradio
15
Kiksy

Vous êtes sur la bonne voie, mais vous avez oublié deux choses:

  1. ajoutez les classes desc à vos divs de description
  2. Vous avez des valeurs numériques pour le input mais du texte pour le id.

J'ai corrigé ce qui précède et ajouté une ligne à initialement hide() le third description div.

Découvrez-le en action - 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

Tu étais assez proche. Vous êtes dans la description Les balises div n’ont pas défini la classe .desc. Pour votre scénario, la valeur du bouton radio doit être égale à div que vous essayez d’afficher.

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

exemple de travail: http://jsfiddle.net/hunter/tcDtr/

10
hunter

Ici vous pouvez trouver exactement ce que vous recherchez.

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

C'est tout..

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

3
Milap

Cela a fonctionné pour moi:

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

Cela devrait faire ce dont vous avez besoin 

http://jsfiddle.net/7Ud6B/

2
Fareesh Vijayarangam

Le sélecteur de masquage était incorrect. J'ai caché les blocs au chargement de la page et affiché la valeur sélectionnée. J'ai également changé les identifiants de division de voiture pour faciliter l'ajout de la valeur du bouton radio et créer le sélecteur d'identifiant approprié.

<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

Avec $("div.desc").hide();, vous essayez essentiellement de cacher un div avec un nom de classe de desc. Ce qui n'existe pas. Avec $("#"+test).show();, vous essayez d'afficher un div avec un identifiant de #2 ou #3. Ce sont des identifiants illégaux en HTML (ne peuvent pas commencer par un nombre), bien qu'ils fonctionnent dans de nombreux navigateurs. Cependant, ils n'existent pas. 

Je renommerais les deux divs en carDiv2 et carDiv3, puis utiliserais une logique différente pour masquer ou afficher.

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

En outre, utilisez une classe pour vos cases à cocher afin que votre liaison devienne quelque chose comme 

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

Votre sélecteur pour .show() et .hide() ne pointe vers rien dans le code.

Version fixe en jsFiddle

0
ShaneBlake