ラジオの選択の表示/非表示

Question

ラジオの選択に基づいてdivを表示/非表示にしたいと思います。

ページを読み込んでdivを非表示にし、ラジオの「はい」を選択します。

- ユーザーがラジオを「いいえ」にすると、divが表示されます。

- ユーザーが「はい」を再チェックすると、divは再び非表示になります。

これはどのように動作するのでしょうか？

HTML：このような

<table width="450px" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td width="200px" style="padding-top:3px; padding-left:3px;"><strong>Deliver Immediately?</strong> 
    <input type="radio" name="imm" id="delivernow" checked="true" />Yes 
    <input type="radio" name="imm" id="deliverlater" />No 
    </td> 
    <td width="140px">  
      <div name="datediv"> 
       <label for="date">Select date:</label> 
       <input type="Text" id="date" maxlength="25" size="25"/> 
       <img src="images/cal.gif" onclick="javascript:NewCssCal('date','ddMMyyyy','arrow',true,'12','','future')" style="cursor:pointer"/> 
      </div> 
    </td>  
    </tr> 
</table 

Answer 1

何か？ jQueryをロードする必要があります。

$(function(){ 
    $("div[name='datediv']").hide(); 
    $("#delivernow").add("#deliverlater").change(function(){ 
     $("div[name='datediv']").fadeToggle(); 
    }); 

}); 

Answer 2

jQueryは非常に簡単です。あなたは（この場合は名前を「IMM」を使用して選択）して、次のようにクリックされていますラジオボタンのIDを確認するラジオ・グループにクリック機能を追加することができます。

$("input[name='imm']").click(function(){ 
    if($(this).attr("id") == "deliverlater"){ 
     $("#datediv").show(); 
    }else{ 
     $("#datediv").hide(); 
    } 
}); 

ここでライブの例ですjsfiddle http://jsfiddle.net/h9H29/

EDIT：は、ここでは、

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    // We place your page code here 
    $("input[name='imm']").click(function(){ 
     if($(this).attr("id") == "deliverlater"){ 
      $("#datediv").show(); 
     }else{ 
      $("#datediv").hide(); 
     } 
    }); 
    }); 
</script>