相互に排他的なチェックボックスを作成する (VB)
作成者: Christian Wenz
一連のオプションの 1 つだけが選択される場合は通常、ラジオ ボタンが使用されます。 ただし、次のような欠点もあります: 一度グループ内の 1 つのラジオ ボタンが選択されると、すべてのラジオ ボタンのチェックを外すことができません。 チェック ボックスはいつでもチェックを外すことができますが、相互排他的ではありません。 このチュートリアルでは、両方のアプローチの良いとこどりである相互排他的なチェック ボックスを紹介します。
概要
一連のオプションの 1 つだけが選択される場合は通常、ラジオ ボタンが使用されます。 ただし、次のような欠点もあります: 一度グループ内の 1 つのラジオ ボタンが選択されると、すべてのラジオ ボタンのチェックを外すことができません。 チェック ボックスはいつでもチェックを外すことができますが、相互排他的ではありません。 このチュートリアルでは、両方のアプローチの良いとこどりである相互排他的なチェック ボックスを紹介します。
手順
ASP.NET AJAX Control Toolkit には MutuallyExclusiveCheckBox エクステンダー コントロールが含まれています。 これにより、プログラマはグループ名 (Key
属性) に任意のチェックボックスを割り当てることができます。 同じグループ内のすべてのチェック ボックスから、一度に選択できるのは 1 つだけです。
まず、新しい ASP.NET ページに 2 つのチェック ボックスを配置することから始めましょう。 もっと多くすることもできますが、以下のように原則のデモを行うには 2 つで十分です。
<asp:CheckBox ID="cbYes" runat="server" />Yes
<asp:CheckBox ID="cbNo" runat="server" />No
どちらのチェックボックスに対しても、MutuallyExclusiveCheckBoxExtender コントロールをページに配置する必要があります。 HTML ラジオ ボタン要素の値属性はそれぞれが属するグループを示すために同じにする必要があるのと同様に、両方の Key 属性に同じ値を持たせる必要があります。 エクステンダー コントロールの TargetControlID プロパティは、チェック ボックスの ID を指します。
<ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="mecbe1" runat="server"
TargetControlID="cbYes" Key="YesNo" />
<ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="mecbe2" runat="server"
TargetControlID="cbNo" Key="YesNo" />
最後に、以下のように ASP.NET AJAX Control Toolkit のすべての要素で必要な ASP.NET AJAX ScriptManager
を含めます。
<asp:ScriptManager ID="asm" runat="server" />
ページを保存して実行します。どちらのチェック ボックスもチェックを付けたり外したりできますが、両方のチェック ボックスに同時にチェックを付けることはできません。
一度にチェックを付けることができるチェックボックスは 1 つだけです (フルサイズ画像を表示するにはクリックしてください)