在Repeter中用RadioButton生成单选按钮组的实现

我们在运用Repeter绑定数据到RadioButton在前台生成单选按钮组的时候，我们可能会遇到生成的按钮并不能实现单选这种情况，即使你设置了GroupName属性，也不会起作用。这时我们就要借助于我们强大的JS了。代码如下：

前台Repeter部分代码：

<asp:Repeater ID="RepeaterYM" runat="server">  



                        <ItemTemplate>  



                            <li>  



                                <asp:RadioButton ID="Year" Text='<%#Eval("Years")%>' runat="server" GroupName="Year"  



                                    ClientIDMode="Static" onclick="selectSingleRadio(this,'Year');" />年<asp:DropDownList 



                                        ID="MonthList" name="Month" Width="120" runat="server" ClientIDMode="Static">  



                                        <asp:ListItem>全部</asp:ListItem>  



                                    </asp:DropDownList>  



                            </li>  



                        </ItemTemplate>  



                    </asp:Repeater> 

生成的单选按钮组源码及Dome：

  <ul>  



                       



                            <li>  



                                <input id="Year" type="radio" name="RepeaterYM$ctl00$Year" value="Year" onclick="selectSingleRadio(this,'Year');" /><label for="Year">2001</label>年<select name="RepeaterYM$ctl00$MonthList" id="MonthList" name="Month" style="width:120px;">  



    <option value="0">全部</option>  



    <option value="10">10月</option>  



    



</select>  



                            </li>  



                           



                            <li>  



                                <input id="Year" type="radio" name="RepeaterYM$ctl01$Year" value="Year" onclick="selectSingleRadio(this,'Year');" /><label for="Year">2005</label>年<select name="RepeaterYM$ctl01$MonthList" id="MonthList" name="Month" style="width:120px;">  



    <option value="0">全部</option>  



    <option value="6">6月</option>  



    



</select>  



                            </li>  



                           



                            <li>  



                                <input id="Year" type="radio" name="RepeaterYM$ctl02$Year" value="Year" onclick="selectSingleRadio(this,'Year');" /><label for="Year">2006</label>年<select name="RepeaterYM$ctl02$MonthList" id="MonthList" name="Month" style="width:120px;">  



    <option value="0">全部</option>  



    <option value="2">2月</option>  



    <option value="3">3月</option>  



    <option value="5">5月</option>  



    <option value="6">6月</option>  



    <option value="12">12月</option>  



    



</select>  



                            </li>  



                           



                            <li>  



                                <input id="Year" type="radio" name="RepeaterYM$ctl03$Year" value="Year" onclick="selectSingleRadio(this,'Year');" /><label for="Year">2007</label>年<select name="RepeaterYM$ctl03$MonthList" id="MonthList" name="Month" style="width:120px;">  



    <option value="0">全部</option>  



    <option value="11">11月</option>  



    



</select>  



                            </li>  



                           



                            <li>  



                                <input id="Year" type="radio" name="RepeaterYM$ctl04$Year" value="Year" onclick="selectSingleRadio(this,'Year');" /><label for="Year">2008</label>年<select name="RepeaterYM$ctl04$MonthList" id="MonthList" name="Month" style="width:120px;">  



    <option value="0">全部</option>  



    <option value="1">1月</option>  



    <option value="6">6月</option>  



    



</select>  



                            </li>  



                           



                            <li>  



                                <input id="Year" type="radio" name="RepeaterYM$ctl05$Year" value="Year" onclick="selectSingleRadio(this,'Year');" /><label for="Year">2009</label>年<select name="RepeaterYM$ctl05$MonthList" id="MonthList" name="Month" style="width:120px;">  



    <option value="0">全部</option>  



    <option value="11">11月</option>  



    <option value="12">12月</option>  



    



</select>  



                            </li>  



                           



                            <li>  



                                <input id="Year" type="radio" name="RepeaterYM$ctl06$Year" value="Year" onclick="selectSingleRadio(this,'Year');" /><label for="Year">2010</label>年<select name="RepeaterYM$ctl06$MonthList" id="MonthList" name="Month" style="width:120px;">  



    <option value="0">全部</option>  



    <option value="2">2月</option>  



    <option value="3">3月</option>  



    <option value="4">4月</option>  



    <option value="7">7月</option>  



    <option value="8">8月</option>  



    <option value="9">9月</option>  



    <option value="12">12月</option>  



    



</select>  



                            </li>  



                           



                            <li>  



                                <input id="Year" type="radio" name="RepeaterYM$ctl07$Year" value="Year" onclick="selectSingleRadio(this,'Year');" /><label for="Year">2011</label>年<select name="RepeaterYM$ctl07$MonthList" id="MonthList" name="Month" style="width:120px;">  



    <option value="0">全部</option>  



    <option value="1">1月</option>  



    <option value="5">5月</option>  



    <option value="6">6月</option>  



    <option value="7">7月</option>  



    <option value="10">10月</option>  



    <option value="11">11月</option>  



    <option value="12">12月</option>  



    



</select>  



                            </li>  



                           



                </ul> 

实现单选效果的JS事件：

//让repeter生成的radio组为单选

    function selectSingleRadio(rbtn, GroupName){

        $("input[type=radio]").each(function (i){

            if(this.name.substring(this.name.length - GroupName.length) == GroupName)

            {

                this.checked = false;

            }

        });

        rbtn.checked = true;

    }

我们现在来看看在后台是如何来遍历Repeter来加载相应组中控件的值的,代码如下：