RadioButtonList控制行显示隐藏的问题

本文主要是介绍RadioButtonList控制行显示隐藏的问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

       在发布商品中，有一个自动上下架时间，同时也有一个RadioButtonLis控件，来控制是否需要实现自动上下架。如果点击“否”，就将下边两行的自动上下架时间隐藏，如果点击”是“就将其显示出来。

       以下代码是这样的：

引用Jquery：

<script src="../../../pixmm/web/js/jquery-1.4.2.min.js" type="text/javascript"></script>

前台代码：

                      <tr ><td class="leftColumn">在指定时间点自动上架和下架：</td><td class="middleColumn"><asp:RadioButtonList runat="server" ID="rblPro_IsAuto" RepeatDirection="Horizontal" style="width :100px;"><asp:ListItem Value="0" Selected="True" >否</asp:ListItem><asp:ListItem Value="1">是</asp:ListItem></asp:RadioButtonList></td></tr><tr id="unitRow1" style ="display :none ;"><td class="leftColumn">商品自动上架时间：</td><td class="middleColumn" style="overflow: visible">         <asp:TextBox ID="txt_Auto"  runat="server"></asp:TextBox><img οnclick="WdatePicker({el:'txt_Auto'})" src="../../My97DatePickerBeta/My97DatePicker/skin/datePicker.gif" align="absmiddle" style="width: 23px; height: 18px;" /><div id="txt_Autodiv"></div></td></tr><tr id="unitRow2" style ="display :none ;"><td class="leftColumn">商品自动下架时间：</td><td><asp:TextBox ID="txt_Down" runat="server"></asp:TextBox><img οnclick="WdatePicker({el:'txt_Down'})" src="../../My97DatePickerBeta/My97DatePicker/skin/datePicker.gif" align="absmiddle" style="width: 23px; height: 18px;" /><div id="txt_Downdiv"></div><span id="AupDown" ></span></td></tr>

引用Jquery代码：

                     <script type="text/javascript">                       $(function(){showCont();$("#rblPro_IsAuto_0:radio").click(function(){showCont();});$("#rblPro_IsAuto_1:radio").click(function(){showCont();});});function showCont(){switch(jQuery("input[name=rblPro_IsAuto]:checked").attr("id")){case "rblPro_IsAuto_0":$("#unitRow1").hide();$("#unitRow2").hide();break;case "rblPro_IsAuto_1":$("#unitRow1").show();$("#unitRow2").show();break;default:break;}}</script>

       这是我最初做的一个小demo，在单独的一个页中，这样运行起来是很成功的，但是一旦加入到我的这个发布商品的页面的时候就不成功了，这是为什么？经过查找资料和排除两种方法得到，Jquery和js中的Prototype.js两者有兼容性的问题。

如何来解决这个问题：

       首先：将引用的Jquery脚本放在Prototype.js这个js脚本后边。

       其次：将以上我们写的JQuery代码改一下下：（将“$”符号用JQuery来代替）

       <script type="text/javascript">var jQuery=$;jQuery(function(){showCont();// $("input[name=price_type]").click(function(){//  showCont();// });jQuery("#rblPro_IsAuto_0:radio").click(function(){showCont();});jQuery("#rblPro_IsAuto_1:radio").click(function(){showCont();});});function showCont(){switch(jQuery("input[name=rblPro_IsAuto]:checked").attr("id")){case "rblPro_IsAuto_0"://alert("one");jQuery("#unitRow1").hide();jQuery("#unitRow2").hide();break;case "rblPro_IsAuto_1":jQuery("#unitRow1").show();jQuery("#unitRow2").show();break;default:break;}}</script>

       这样就可以解决兼容冲突的问题了。

       在这实习期间，最要命的就是有时候往往丢掉一个括号，整个程序都不能进行下去，细节决定成败。同时自己也明白，我学的东西还很少，需要狠狠的加油！！！

这篇关于RadioButtonList控制行显示隐藏的问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---