web-dev-qa-db-ja.com

ラジオボタンのクリックに基づいてdivを表示および非表示にします

ラジオボタンと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が苦手です。

jqueryradio
16
Kiksy

あなたは正しい軌道に乗っていますが、2つのことを忘れました：

  1. descクラスを説明divに追加します
  2. inputには数値がありますが、idにはテキストがあります。

上記を修正し、最初にhide() thethirddescription 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();
    });
});
43
Jason McCreary

あなたはかなり近かった。説明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/

10
hunter

ここでは、探しているものを正確に見つけることができます。

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

3
Milap

これは私のために働いた：

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

これはあなたが必要なことをするはずです

http://jsfiddle.net/7Ud6B/

2
Fareesh Vijayarangam

非表示セレクターが正しくありませんでした。ページの読み込み時にブロックを非表示にし、選択した値を表示しました。また、ラジオボタンの値を追加し、適切なIDセレクターを作成しやすくするために、car div 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>
1
Tim Hobbs

$("div.desc").hide();を使用すると、descのクラス名を持つdivを非表示にしようとしています。存在しません。 $("#"+test).show();を使用すると、#2または#3のIDを持つdivを表示しようとしています。これらは、多くのブラウザで動作しますが、HTMLの違法なIDです（数字で始めることはできません）。しかし、それらは存在しません。

2つのdivの名前をcarDiv2とcarDiv3に変更してから、異なるロジックを使用して非表示または表示します。

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

また、チェックボックスにクラスを使用して、バインディングが次のようになるようにします

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

.show()および.hide()のセレクターは、コード内の何も指していません。

jsFiddleの修正バージョン

0
ShaneBlake