2013年6月13日 星期四

jQuery 取得 checkbox 至少有一個選取

客戶的需求中,「當使用者至少要選取一筆資料才能進行下一個動作」。常見的 UI 設計,當然是使用 checkbox。

而我的 case,是資料有一萬多筆,此時整個網頁非常痴肥而難以接受。問題是,客戶就是要這樣的網頁,客戶拒絕分頁

jQuery length

問題來了,此時我使用了如下的 jQuery 語法查詢是否有選取一個 checkbox

var isChecked = $('input[name=chk]:checked').length > 0;

相當然爾,網頁就硬生生當在那裡,動也不能動。效能不好

jQuery is

根據我「多年」「 .NET」的經驗,使用 length 等同於計算所有被勾選的項目,然後再計算出總筆數,這樣的效能當然不好啊。於是趕快找一找 jQuery document,很快的就發現了 jQuery is 非常符合我的需求。於是馬上改了程式

   1: var isChecked = $('input[name=chk]')is(':checked');

滿心期待效能飛快,但「更慢了」。怎麼會…

效能比較

找到一個測試,也證實了這樣的結果。怎麼會這樣…

另外,又找了一個 checkboxtests,這次加入了自己寫的 .each() 來測試是否會比較快?結論是:不會。

心得

到了 javascript 的世界,以前許多經驗值就必須大打折扣了。

4 則留言:

Eric... 提到...

如果先隱藏一個 textbox 在後面, 加一個checkbox checked 事件去更新 textbox 內容呢? 更新時只要讀 textbox 就可取得 checked checkbox 的筆數及內容.

秉程 提到...

這樣做也是 ok的。不過我的case是,網頁顯示時,預設全選。使用者通常會直接送出網頁,因此沒有機會更新 textbox 的內容。
所以您的方法目前不適用我的狀況。

KEN 提到...

若用以下判斷會較快嗎?
只取取有勾選的第一個:

$('input[name=chk]:checked:first').length > 0

花了點時間寫了一點小測試,好像沒有文章中說的那麼慢? 不知是什麼問題,不過is()確定是最慢的。

http://jsfiddle.net/M9kqw/1/

maxmas 提到...

你一萬筆資料載入到瀏覽器,這整個HTML內容是很大的,你想,需要吃掉多少記憶體,以及用到多少硬碟空間當記憶體分頁,所以當然會卡啊,若是用IE瀏覽器的話,會崩潰,因為IE8以下的JAVA引擎很爛,只要執行比較大的javascript運算,就卡卡,要不然就是無法執行,用Chrome就不會,要在整個一萬筆資料裡面用javascript去檢查,首先在操作的電腦一定要強,再來用Chrome瀏覽器瀏覽!!

Share with Facebook