无线电选择隐藏/显示分区

Question

我想基于无线电选择隐藏/显示分区。

- 在页面加载时div被隐藏，并且选择收音机“yes”。

- 如果用户选择收音机“否”，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/

编辑：这里是jQuery的包括代码为您

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