用Jquery在前台实现单选按钮事件不刷新页面

[Cara卡拉]

我要实现的点击单选按钮，不刷新页面，代码如下
<asp:RadioButton ID="rbtnDay" runat="server" Text="单天" Checked="true" GroupName="rDate" AutoPostBack="True" oncheckedchanged="rbtnDay_CheckedChanged"/> 
<asp:RadioButton ID="rbtnMonth" runat="server" Text="单月" GroupName="rDate" AutoPostBack="True" oncheckedchanged="rbtnMonth_CheckedChanged"/> 
<asp:RadioButton ID="rbtnDays" runat="server" Text="时间段" GroupName="rDate" AutoPostBack="True" oncheckedchanged="rbtnDays_CheckedChanged"/></td>

oncheckedchanged是后台事件，
protected void rbtnDay_CheckedChanged(object sender, EventArgs e)
{
dvDateMonth.Visible = dvDateDays1.Visible = dvDateDays2.Visible = false;
dvDateDay.Visible = true;
}
protected void rbtnMonth_CheckedChanged(object sender, EventArgs e)
{
dvDateDay.Visible = dvDateDays1.Visible = dvDateDays2.Visible = false;
dvDateMonth.Visible = true;
}
protected void rbtnDays_CheckedChanged(object sender, EventArgs e)
{
dvDateMonth.Visible = dvDateDay.Visible = false;
dvDateDays1.Visible = dvDateDays2.Visible = true;
}每次点击按钮都会进行一次提交。我想在前台实现不刷新页面，又可以实现按钮的改变事件。
各位高手帮帮忙！！！

[中国哈士奇]

楼主为什么不使用 vs自带无刷新控件updatepanel控件呢？

[cainiao223]

加个属性 OnClientClick ="function" 类似oncheckedchanged要提交后台的都删掉 提交后台用$.ajax 至于要实现 dvDateMonth.Visible = dvDateDays1.Visible = dvDateDays2.Visible = false; 这些jquery都是可以轻易做到的

[圣光麦造]

这个不用写在后台把~直接在前台用Js来控制就行了 没有涉及到数据操作

[圣光麦造]

引用 2 楼 shengguang1587 的回复:

这个不用写在后台把~直接在前台用Js来控制就行了 没有涉及到数据操作

只是一些元素的隐藏显示 用Jquery很容易做到 如 $("#dvDateDays1").hide();

[心随莎动]

前端JS完全可以控制的，为什么要写到后台CS文件中

[Cara卡拉]

谢谢大家！我已经解决了。方法如下 <script type="text/javascript"> function masterId(id) { return "#ctl00_ContentPlaceHolder_" + id; } //单天 function DisplayDay() { $(masterId("dvDateDay")).show(); $(masterId("dvDateMonth")).hide(); } //单月 function DisplayMonth() { $(masterId("dvDateDay")).hide(); $(masterId("dvDateMonth")).show(); } $(document).ready(function () { //窗体加载时，判断radio是否选中， var day = $("input[type = radio]:checked").val(); if (day == "rbtnDay") { DisplayDay(); } else if (day == "rbtnMonth") { DisplayMonth(); } else { DisplayDay(); }//单选按钮 }); //窗体加载完毕 </script> <asp:RadioButton ID="rbtnDay" runat="server" GroupName="rDate" Text="单天" AutoPostBack="True" Checked="true" OnClick="return DisplayDay();"/>  <asp:RadioButton ID="rbtnMonth" runat="server" GroupName="rDate" Text="单月" AutoPostBack="True" OnClick="return DisplayMonth();"/>  <div id="dvDateDay" runat="server" style="float:left;display:none;"> <asp:TextBox ID="txtDate" runat="server" Width="80px" CssClass="Wdate" ToolTip="点击后选择单天日期" onclick="WdatePicker()" MaxLength="10"></asp:TextBox> </div> <div id="dvDateMonth" runat="server" style="float:left;display:none;"> <asp:DropDownList ID="ddlMonth" runat="server" ToolTip="选择月份"> </asp:DropDownList></div>