Membuat Kotak Centang Saling Eksklusif (C#)

oleh Christian Wenz

Unduh PDF

Ketika hanya satu set opsi yang dapat dipilih, tombol radio biasanya digunakan. Namun, ada kelemahan: Setelah satu tombol radio dalam grup dipilih, tidak dimungkinkan untuk menghapus centang semua tombol radio. Kotak centang dapat dikosongkan kapan saja, namun tidak saling eksklusif. Tutorial ini memberikan yang terbaik dari kedua pendekatan: kotak centang yang saling eksklusif.

Gambaran Umum

Ketika hanya satu set opsi yang dapat dipilih, tombol radio biasanya digunakan. Namun, ada kelemahan: Setelah satu tombol radio dalam grup dipilih, tidak dimungkinkan untuk menghapus centang semua tombol radio. Kotak centang dapat dikosongkan kapan saja, namun tidak saling eksklusif. Tutorial ini memberikan yang terbaik dari kedua pendekatan: kotak centang yang saling eksklusif.

Langkah-langkah

Toolkit Kontrol AJAX ASP.NET berisi extender MutuallyExclusiveCheckBox. Ini memungkinkan programmer untuk menetapkan kotak centang apa pun ke nama grup (Key atribut). Dari semua kotak centang dalam grup yang sama, hanya satu yang dapat dipilih pada satu waktu.

Mari kita mulai dengan meletakkan dua kotak centang di halaman ASP.NET baru. Mungkin ada lebih banyak, tetapi dua di antaranya cukup untuk menunjukkan prinsip:

<asp:CheckBox ID="cbYes" runat="server" />Yes
<asp:CheckBox ID="cbNo" runat="server" />No

Untuk kedua kotak centang, kontrol MutuallyExclusiveCheckBoxExtender harus diletakkan di halaman. Kedua atribut Key harus memiliki nilai yang sama, sama seperti atribut nilai elemen tombol radio HTML harus identik untuk menunjukkan grup tempat mereka berada. Properti TargetControlID dari titik extender ke ID kotak centang.

<ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="mecbe1" runat="server"
 TargetControlID="cbYes" Key="YesNo" />
<ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="mecbe2" runat="server"
 TargetControlID="cbNo" Key="YesNo" />

Terakhir, sertakan ASP.NET AJAX ScriptManager yang diperlukan oleh semua elemen ASP.NET AJAX Control Toolkit:

<asp:ScriptManager ID="asm" runat="server" />

Simpan dan jalankan halaman: Anda dapat mencentang dan menghapus centang kedua kotak centang, namun tidak ada waktu kedua kotak centang dapat dicentang.

Hanya satu kotak centang yang dapat dicentang pada satu waktu (Klik untuk melihat gambar ukuran penuh)

Berikutnya