記住跨頁面複選框 - 最好的方法是什麼？

Question

我需要添加與Gmail相似的功能，其中項目列表上的複選框會記錄在多頁結果中，以及何時離開並返回結果。我試圖弄清楚的是做到這一點的最佳方式。我使用PHP和可能的jQuery。

我的第一個想法是添加一個onClick到每個複選框，觸發一個AJAX調用回服務器，該服務器將id存儲在會話中的數組中。每次加載項目列表時，系統都會檢查該行是否已被選中，並在必要時檢查複選框。爲了可靠性，在檢查對服務器的請求是否無法完成（連接問題，服務器錯誤等）之後，複選框將被取消選中，並且儘可能快地提出請求。

這聽起來都不錯，除了少數項​​目：

• 檢查所有：發生了什麼？它是否向服務器發送30個（默認頁面項目）請求？或者我刪除所有的onClicks，選中複選框，向所有ID發送請求到服務器，然後重新添加onClicks？要麼...？類似的問題全部取消選中。
• 速度：有可能開始出現問題，如果用戶的100S都檢查，並取消選中所有的時間
• 瀏覽器速度：我想這是最好的頁面加載後與JS添加的onClick，我敢如果一頁上有500個或更多項目，思考可能需要1秒鐘或2秒鐘。全部檢查會成爲一個更大的問題。

在過去，我還沒有找到一種可靠的方式來檢測用戶何時離開頁面。如果有可靠的方法，那麼我可以看到這是一個選項，因此它只是在每個頁面上記錄卸載。

有沒有其他解決方案或更好的方法？

編輯：如Eran Galperin所述，check all方法只需要檢查每個複選框，然後對所有行進行ajax調用。無需刪除onClick。

另外，它看起來像事件委託方法是一個好主意—會使事情變得更容易。

Answer 1

1. 當您編程改變複選框的選中狀態時，onclick事件不會觸發。當用戶單擊全部取消/取消鏈接時，您可以發送不同的AJAX請求，而不用擔心您附加到單個複選框的點擊事件。
2. 這是每次點擊使用請求時的權衡。或者使用保存整個表單的「保存」按鈕。
3. 使用event delegation - 將一個onclick事件附加到包含所有複選框的整個容器，並檢查事件的目標以查看是否單擊了複選框。此外，我個人會避免在同一頁面上顯示500個不同的選項。如果絕對有必要有這麼多選項，請將它們分成幾個區域/頁面。

離開你可以使用onbeforeonload事件的頁面的用戶，但如果瀏覽器崩潰或其它非正常退出也不會被抓住。取決於它能夠捕獲用戶更改的關鍵程度來使用它。