無線電選擇隱藏/顯示分區

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>