在 Web 開發中，復選框是常見的交互元素，尤其是在涉及批量操作、數據篩選等場景時，全選功能和選中項查詢功能顯得尤為重要。本文將介紹如何使用 HTML、CSS 和 jQuery 實現一個具備全選、反選以及選中項查詢功能的復選框組，幫助開發者高效處理用戶的選擇操作。
一、功能概述
本次實現的功能主要包括以下幾點：
- 全選與反選：通過標題欄的復選框，可以一鍵選中或取消選中內容區域的所有復選框。
- 聯動更新：當內容區域的復選框全部被選中時，標題欄的復選框自動勾選；若有任意一個取消選中，標題欄復選框則取消勾選。
- 選中項查詢：點擊 “點擊查詢被勾選的復選框” 按鈕，能夠獲取并展示當前被勾選的復選框數量和具體元素，方便后續數據處理。
效果圖：
二、HTML 結構搭建
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>body{text-align: center;}</style><script src="js/jquery-3.7.1.min.js"></script>
</head>
<body><div class="content"><div class="titleContent"><input type="checkbox" class="titleCheck" />標題部分</div><div class="aboutContent"><div><input type="checkbox" class="contentCheck" />內容1</div><div><input type="checkbox" class="contentCheck" />內容2</div><div><input type="checkbox" class="contentCheck" />內容3</div><div><input type="checkbox" class="contentCheck" />內容4</div><div><input type="checkbox" class="contentCheck" />內容5</div><div><input type="checkbox" class="contentCheck" />內容6</div></div><button class="searchBtn">點擊查詢被勾選的復選框</button></div><script>// 具體實現代碼將在下文JavaScript部分詳細說明</script>
</body>
</html>
上述 HTML 代碼構建了基本的頁面結構：
- 外層
div（類名為content）作為整體容器。 titleContent類的div包含標題欄的復選框（類名titleCheck），用于控制全選和反選操作。aboutContent類的div內包含多個子div，每個子div中都有一個內容復選框（類名contentCheck），代表具體的可選內容。- 最后是一個按鈕（類名
searchBtn），用于觸發選中項查詢操作。
三、CSS 樣式設計
body{text-align: center;
}
本次示例的 CSS 樣式較為簡潔，僅通過text-align: center;將頁面內的元素居中顯示，保證整體布局的美觀性。實際開發中，可根據項目需求進一步細化復選框、按鈕等元素的樣式，如顏色、大小、邊框等。
四、jQuery 功能實現
$(document).on('change', '.titleCheck', function() {// 獲取全選 checkbox 的選中狀態let isChecked = $(this).prop('checked');// 只選擇當前頁面顯示的復選框進行操作$('.aboutContent .contentCheck').prop('checked', isChecked);// 更新全選按鈕的狀態let allChecked = $('.aboutContent .contentCheck').length === $('.aboutContent .contentCheck:checked').length;$('.titleCheck').prop('checked', allChecked);
});// 為單個復選框添加事件監聽器
$(document).on('change', '.contentCheck', function() {// 只檢查當前頁面顯示的復選框let allChecked = $('.aboutContent .contentCheck').length === $('.aboutContent .contentCheck:checked').length;$('.titleCheck').prop('checked', allChecked);
});$('.searchBtn').click(function() {// 獲取當前頁面所有被勾選的復選框let checkedCheckboxes = $('.aboutContent .contentCheck:checked');console.log(checkedCheckboxes);let checkedCount = checkedCheckboxes.length;console.log(checkedCount);
})
上述 jQuery 代碼實現了核心功能：
- 全選與反選邏輯：監聽
.titleCheck復選框的change事件，當標題欄復選框狀態改變時，將內容區域所有.contentCheck復選框的狀態設置為相同；隨后檢查內容區域復選框是否全部被選中，若全部選中則勾選標題欄復選框，否則取消勾選。 - 聯動更新邏輯：監聽
.contentCheck復選框的change事件，每次內容區域的復選框狀態改變時，檢查所有內容復選框是否都處于選中狀態，若全部選中則勾選標題欄復選框，否則取消勾選，實現兩者狀態的聯動。 - 選中項查詢邏輯：監聽
.searchBtn按鈕的click事件，通過選擇器.aboutContent .contentCheck:checked獲取所有被勾選的內容復選框，將其打印到控制臺，同時獲取并打印被勾選的復選框數量，方便開發者進行后續的數據處理或展示。
五、配置與擴展
- 配置修改：若需要修改頁面結構中的類名，可直接在 HTML 和 JavaScript 代碼中修改
.aboutContent（內容區域類名）、.titleCheck（標題欄復選框類名）、.contentCheck（內容復選框類名），確保兩者保持一致即可正常運行。 - 功能擴展：在獲取到選中的復選框后，開發者可以根據實際需求進行數據提交、頁面跳轉、高亮顯示等更多操作，如將選中項的數據發送到后端接口，或在頁面上展示選中項的具體信息。
通過以上 HTML、CSS 和 jQuery 代碼的結合，我們成功實現了一個功能實用的復選框全選與選中項查詢系統。該系統結構清晰、易于擴展，能夠滿足多種 Web 開發場景下的復選框操作需求。
