JQuery提供了勾選(checked)多個復選框的便捷方法。這個功能可以幫助我們簡化代碼并節省更多時間。
$(document).ready(function(){ // 全選按鈕點擊事件 $('#checkAll').click(function(){ $('input[type="checkbox"]').prop('checked', this.checked); }); // 多選框點擊事件 $('input[type="checkbox"]').click(function(){ var flag = true; $('input[type="checkbox"]').each(function(){ if(!$(this).prop('checked')){ flag = false; } }); $('#checkAll').prop('checked', flag); }); });
這段代碼中,首先我們在文檔準備好后,檢測全選按鈕是否被點擊。如果被勾選,我們就使用“prop”函數勾選所有的多選框。如果全選按鈕沒有被點擊,我們就不勾選任何多選框。
接著,我們要判斷所有多選框的狀態是否與全選按鈕的狀態一致。如果是,就讓全選按鈕被勾選。如果不是,就讓全選按鈕不被勾選。這樣,當我們勾選所有的多選框時,全選按鈕會自動跟著勾選。反之亦然。
在這個例子中,我們可以看到,“prop”函數是勾選和取消勾選多選框的語法。這個函數是JQuery的專有函數,它能將我們的代碼變得更簡潔明了。