Показать и скрыть divs на основе нажатия переключателя

Я хочу иметь возможность динамически изменять, какие divs показываются с помощью переключателя и 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>

и jQuery:

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

Это ничего не делает, divs всегда показывают. Я уверен, что это просто, но Im бедный в jQuery.

ОТВЕТЫ

Ответ 1

Ты на правильном пути, но ты забыл две вещи:

  • добавьте классы desc в описание divs
  • У вас есть числовые значения для 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();
    });
});

Ответ 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/

Ответ 3

Это сработало для меня:

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

Ответ 4

Здесь вы можете найти именно то, что ищете.

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

Ответ 6

Скрытый селектор был неправильным. Я спрятал блоки при загрузке страницы и показал выбранное значение. Я также изменил идентификатор автомобиля, чтобы упростить добавление значения переключателя и создать правильный селектор идентификаторов.

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

Ответ 7

С $("div.desc").hide(); вы по существу пытаетесь скрыть div с именем класса desc. Который не существует. С помощью $("#"+test).show(); вы пытаетесь показать либо div с идентификатором #2, либо #3. Это незаконный идентификатор в HTML (не может начинаться с числа), хотя они будут работать во многих браузерах. Однако их не существует.

Я бы переименовал два divs в carDiv2 и carDiv3, а затем использовал другую логику, чтобы скрыть или показать.

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

Кроме того, используйте класс для своих флажков, чтобы ваша привязка стала чем-то вроде

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