[英]Hide/Show Div on Radio Selection
我想隐藏/显示基于无线电选择的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
像这样吗 您将需要加载jQuery。
$(function(){
$("div[name='datediv']").hide();
$("#delivernow").add("#deliverlater").change(function(){
$("div[name='datediv']").fadeToggle();
});
});
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.