AJAX ControlToolkit学习日志-MutuallyExclusiveCheckBoxExtender(17)

         MutuallyExclusiveCheckBoxExtender控件用于对一个项目进行选择,使它只可以选一个,但是若不可能发生,也可以不选择。
下面请看一个示例:

1)在VS2005中新建一个ASP.NET AJAX-Enabled Web Project项目工程,命名为MutuallyExculsiveCheckBoxExtender1。

2)在页面上拖放4个CheckBox,分别设置它们的ID为CheckBox1,CheckBox2,CheckBox3,CheckBox4,设置文本为bedroom,bedroom,door,door。

代码如下:

 1        <br />
 2        Do &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
 3        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
 4        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Don't<br />
 5        <br />
 6        <asp:CheckBox ID="CheckBox1" Text="bedroom" runat="server" />
 7        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
 8        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
 9        <asp:CheckBox ID="CheckBox2" Text="bedroom" runat="server" />
10        <br />
11        <br />
12        <asp:CheckBox ID="CheckBox3" runat="server" Text="door" />
13        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
14        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
15        <asp:CheckBox ID="CheckBox4" runat="server" Text="door" /><br />
16        <br />

3)然后在页面上拖放4个MutuallyExculsiveCheckBoxExtender控件,分别关联到CheckBox1,CheckBox2,CheckBox3,CheckBox4。并设置一些属性。

代码如下:

 1        <cc1:MutuallyExclusiveCheckBoxExtender ID="MutuallyExclusiveCheckBoxExtender1" TargetControlID="CheckBox1" Key="bedroomCheckBox" runat="server">
 2        </cc1:MutuallyExclusiveCheckBoxExtender>
 3        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
 4        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
 5        &nbsp; &nbsp; &nbsp; &nbsp;
 6        <cc1:MutuallyExclusiveCheckBoxExtender ID="MutuallyExclusiveCheckBoxExtender2" TargetControlID="CheckBox2" Key="bedroomCheckBox" runat="server">
 7        </cc1:MutuallyExclusiveCheckBoxExtender>
 8        <br />
 9        <cc1:MutuallyExclusiveCheckBoxExtender ID="MutuallyExclusiveCheckBoxExtender3" TargetControlID="CheckBox3" Key="doorCheckBox" runat="server">
10        </cc1:MutuallyExclusiveCheckBoxExtender>
11        <br />
12        <cc1:MutuallyExclusiveCheckBoxExtender ID="MutuallyExclusiveCheckBoxExtender4" TargetControlID="CheckBox4" Key="doorCheckBox" runat="server">
13        </cc1:MutuallyExclusiveCheckBoxExtender>

属性说明:
      TargetControlID:该控件关联的CheckBox。
      Key:这唯一的键用于关联几个CheckBox,从而使这几个CheckBox最多只能有一个选择或不选。

4)按下CTRL+F5,在浏览器中查看该效果。

该效果图如下:

posted @ 2007-03-20 19:46  潮儿  阅读(807)  评论(1编辑  收藏  举报