jQuery是一種JavaScript庫,它為開發者提供了方便快捷的API來操作DOM,處理事件和實現動畫效果等等。其中一個非常常見的操作就是全選,這在開發web應用中非常有用。下面我們使用jQuery來實現一個全選功能。
$(document).ready(function(){ // 獲取全選按鈕 var selectAll = $("#select-all"); // 獲取所有的checkbox var checkboxes = $("input[type='checkbox']"); // 給全選按鈕綁定點擊事件 selectAll.click(function(){ checkboxes.prop("checked", selectAll.prop("checked")); }); // 給checkbox綁定點擊事件 checkboxes.click(function(){ // 判斷是否所有的checkbox都被選中 if(checkboxes.length == $("input[type='checkbox']:checked").length){ // 如果是,則將全選按鈕勾選上 selectAll.prop("checked", true); }else{ // 否則將全選按鈕取消勾選 selectAll.prop("checked", false); } }); });
以上代碼中,我們首先通過jQuery選擇器獲取了全選按鈕和所有的checkbox,然后給全選按鈕綁定點擊事件,當點擊全選按鈕時,我們將所有的checkbox的checked屬性設置為全選按鈕的checked屬性的值。當然,全選按鈕自身的clicked事件我們也需要處理一下,這里我們通過判斷所有的checkbox是否都被選中來確定是否要勾選全選按鈕。