RadioButtonList实现选择切换效果

这个虽然有点简单，但是希望把学习中的点点滴滴积累下来，有可能就滴水成河了。首先，有个RadioButtonList，通过单击button切换不同的画面

代码

< tr >
< td class = " tbcaption " >
处理类型
</ td >
< td >
< asp:RadioButtonList ID = " rdoProcessType " runat = " server " onc
RepeatDirection = " Horizontal " RepeatLayout = " Flow " >
< asp:ListItem Value = " 1 " Selected = " True " > 移交 </ asp:ListItem >
< asp:ListItem Value = " 2 " > 归档 </ asp:ListItem >
< asp:ListItem Value = " 3 " > 归档并公网发布 </ asp:ListItem >
</ asp:RadioButtonList >
</ td >
</ tr >

通过jquey实现

 

代码

< script type = " text/javascript " >
$(document).ready(function() {
// AddFreeTextBoxValidate();
});
function changeProcessType() {
var rdoValue = $( " #<%=rdoProcessType.ClientID %> :radio[checked] " ).val();
$( " #trFlows " ).hide();
$( " #trLimiteDate " ).hide();
$( " #trUnits " ).hide();
$( " #<% = txtLimitDate.ClientID %> " ).attr( " require " , " false " );
$( " #trSendToWeb " ).hide();
if (rdoValue == 1 ) {
// 如果是“移交”则显示流程框，并加入流程验证。
$( " #trFlows " ).show();
$( " #trLimiteDate " ).show();
$( " #trUnits " ).show();
validateDropDownList( true );
revertFlowControlValidate();
// AddFreeTextBoxValidate();
}
else if (rdoValue == 2 ) {
validateDropDownList( false );
cancelFlowControlValidate();
// CancelFreeTextBoxValidate();

}
else if (rdoValue == 3 ){
$( " #trSendToWeb " ).show();
validateDropDownList( false );
cancelFlowControlValidate();
}

else {
$( " #trLimiteDate " ).show();
$( " #trUnits " ).show();
validateDropDownList( false );
cancelFlowControlValidate();
// CancelFreeTextBoxValidate();
$( " #<% = txtLimitDate.ClientID %> " ).attr( " require " , " true " );
}
}
</ script >

 后台代码

if ( ! Page.IsPostBack)
{
rdoProcessType.Attributes.Add( " onclick " , " return changeProcessType(); " );
this .BindDefualtValue();
}

 

转载于:https://www.cnblogs.com/gaowenbin/articles/1845885.html