0

動作していない単純なページのコードは次のとおりです。

    <head>
<script src="js/jquery-1.7.min.js"></script>

<script type="text/javascript">
<!--
$("input[type=radio]").on('click', function(){
    if ($('#radio1').is(':checked')){
        $("#grid_9.omega").slideDown("slow");
    } else { 
        $("#grid_9.omega").slideUp("slow");
    }
});
//-->
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <p>
    <label>
      <input type="radio" name="RadioGroup1" value="radio1" id="radio1" />
      Radio 1</label>
    <br />
    <label>
      <input type="radio" name="RadioGroup1" value="radio2" id="radio2" />
      Radio 2</label>
    <br />
    <label>
      <input type="radio" name="RadioGroup1" value="radio3" id="radio3" />
      Radio 3</label>
    <br />
  </p>
</form>
<div id="grid_9" class="omega" style="display:none">show me when Radio 1 is chosen​&lt;/div>
</body>

私の目標は、「radio1」が選択されているときにjqueryを使用してdiv「grid_9.omega」を表示することですが、「radio1」が選択されていないときはそのdivを非表示にします。

アドバイス？

4

3 に答える 3

3

簡単にできること：

$("input[type=radio]").on('click', function(){
    if(this.id == 'radio1')
        $("#grid_9.omega").slideDown("slow");
    else
       $("#grid_9.omega").slideUp("slow");
});

作業サンプル

無線が動的である場合、つまりページの読み込み後にDOMに追加する場合は、次のようなデリゲートイベントハンドラーが必要です。

$('body').on('click', 'input[type=radio]', function() {
  if(this.id == 'radio1')
      $("#grid_9.omega").slideDown("slow");
  else
     $("#grid_9.omega").slideUp("slow");
});

代わりに、セレクターとしてinput[type=radio]のみ使用できます。:radioすなわち

$(':radio').on('click', ...)

また

$('body').on('click', ':radio',..)

ノート

デリゲートイベントの場合は、の代わりに他の静的要素を使用することをお勧めしますbody。がDOMに対して静的である場合、form1つまりページの読み込み時にDOMに属している場合は、代わりに

$('body').on('click', 'input[type=radio]', function() {..})

あなたが使用する必要があります

$('#form1').on('click', 'input[type=radio]', function() {..})

残り

すべてのコードを内に配置します

$(document).ready(function() {
  // your code
});

それは足りない

$(function() {
  // your code
});
于 2012-06-27T02:13:57.543 に答える
2

これを試してください：jsFiddle

<script type="text/javascript">
$(function() {
$("input[type=radio]").on('click', function(){
    if ($('#radio1').is(':checked')){
        $("#grid_9.omega").slideDown("slow");
    } else { 
        $("#grid_9.omega").slideUp("slow");
    }
});
});
</script>
<form id="form1" name="form1" method="post" action="">
  <p>
    <label>
      <input type="radio" name="RadioGroup1" value="radio1" id="radio1" />
      Radio 1</label>
    <br />
    <label>
      <input type="radio" name="RadioGroup1" value="radio2" id="radio2" />
      Radio 2</label>
    <br />
    <label>
      <input type="radio" name="RadioGroup1" value="radio3" id="radio3" />
      Radio 3</label>
    <br />
  </p>
</form>
<div id="grid_9" class="omega" style="display:none">show me when Radio 1 is chosen</div>

コードから変更したのは、スクリプトの最初にドキュメントを追加することだけでした。

于 2012-06-27T01:54:32.980 に答える
1

これで試してください

<script type="text/javascript">
<!--
$(function(){
    $(document).on('change','input:radio', function(){
        if ($('#radio1').is(':checked')){
            $("#grid_9.omega").slideDown("slow");
        } else { 
            $("#grid_9.omega").slideUp("slow");
        }
    });
}
//-->
</script>

jsFiddle デモ

于 2012-06-27T01:23:59.223 に答える