jQuery可以非常方便地幫助我們設置復選框的全選功能。一個比較簡單的實現方案如下:
$('#check-all').click(function(){ $('input[type="checkbox"]').prop('checked', this.checked); });
這里我們首先選中一個id為check-all的元素,一般是全選按鈕。當點擊這個按鈕時,我們通過jQuery的prop方法將所有type為checkbox的input元素的checked屬性值設置為當前按鈕的checked屬性值。這樣就能實現全選的功能了。
如果需要實現反選的功能,只需要稍微改動一下代碼:
$('#check-all').click(function(){ $('input[type="checkbox"]').prop('checked', function(i, value){ return !value; }); });
這里我們傳入了一個回調函數作為prop方法的參數,這個函數會在每個復選框上執行,并返回一個布爾值。我們將每個復選框的checked屬性值取反,就實現了反選的功能。
上一篇css上移div