Yahoo!用戶界面博客（YUIBlog）

在銳3畫廊：複選框組行為

複選框和單選按鈕是眾所周知的從一個小項目選擇的模式。 前者可以讓你選擇任何項目（包括無）子集，而後者則需要一個選擇。

但是，如果你需要一個不同的行為呢？ 複選框組模塊在YUI 3畫廊實現了三個常見的情況和建設其他基礎。 該模塊是基於複選框，默認情況下，因為他們不執行任何限制，這使得他們一個理想的基礎上，建立。

模塊所提供的第Y.AtLeastOneCheckboxGroup行為Y.AtLeastOneCheckboxGroup Y AtLeastOneCheckboxGroup。 這強制執行，必須選擇至少一個項目。 多一個選擇是允許的，但被阻止取消選擇所有項目。 使用“汞滴”中討論的算法接口 TOG：每當你嘗試取消選擇的最後一個項目，選擇從光標下的滑出。 在這裡 ，你可以玩它。

第二個例子（ Y.AtMostOneCheckboxGroup ）允許沒有選擇，但不得超過一個選擇。 請注意，你不能使用此單選按鈕，因為那是不可能的，取消選擇當前項目。 在此頁上的第二個例子說明了這一點。

最後一個例子（ Y.SelectAllCheckboxGroup ）實現了一個“選擇所有”的行為使用一個額外的複選框。 選擇“全選”複選框選擇所有其他項目。 取消選擇，取消選擇所有其他項目。 選擇或取消選擇任何項目，更新的“全選”複選框的狀態。 你可以嘗試玩這個頁面上的第三個例子。

possiblities是無止境的。 你可以建立自己的自定義行為迅速通過擴展基類的所有上面的例子： Y.CheckboxGroup 。 這需要所有官僚，因此，所有你所要做的的是enforceConstraints() 。 調用函數與管理的複選框，並剛剛被改變複選框指數列表。 然後，您可以檢查並更新所有的複選框的狀態來執行您的自定義的約束。

在許多情況下，所有你需要的複選框自己，例如， Y.AtLeastOneCheckboxGroup和Y.AtMostOneCheckboxGroup 。 對於這一點，你的構造函數可以傳遞的，因為基Y.CheckboxGroup CheckboxGroup會為你管理列表。 ，如果你需要額外的控制，例如Y.SelectAllCheckboxGroup SelectAllCheckboxGroup，你的構造應要求對這些控件的引用，所以你可以訪問他們的enforceConstraints() （），你需要將它們存儲。

要使用CheckBox組模塊，包括以下網頁上的腳本：

 <腳本類型 =“text / javascript中”的

所提供的行為都安裝和忘記：

 YUI（）。使用（“畫廊 checkboxgroups”功能（Y）
 {
	 / /行為與 CSS類“ - 至少在我的一個複選框組”中的所有複選框
	新Y. AtLeastOneCheckboxGroup（“ - 至少在我的一個複選框組。'）;

	 / /重視行為的所有複選框 CSS類“我在最一個複選框組”
	新Y. AtMostOneCheckboxGroup（“我在最一個複選框組。'）;

	 / /重視行為的所有複選框 CSS類“我選擇的所有複選框組”，
	 / / id為“我的選擇 - 所有複選框的複選框控制”
	新的Y。SelectAllCheckboxGroup（'＃我選擇所有的複選框“，”我選擇所有複選框組。'）;
 }）;

最後要注意的：在理想的情況下，自定義行為的複選框應該有不同的樣式，使用戶有一些跡象表明，他們不只是簡單的複選框。 例如，過渡期補貼建議使用Y.AtLeastOneCheckboxGroup鑽石。 然而，在實踐中，你還必須確保人們可以計算出你的控制選擇項目。 因此，聰明的，只是沒有太聰明了！

談話： bloglines | technorati

分享和擴展： 書籤del.icio.us | Digg它！ | 書籤交易！