Trong hướng dẫn này, chúng ta sẽ xem cách kiểm tra hoặc chọn nhiều hộp kiểm trên bảng HTML bằng jQuery. Chúng tôi sẽ đặt hộp kiểm đối với từng hàng trên bảng để người dùng có thể chọn một hàng cụ thể. Chúng tôi cũng sẽ đặt một hộp kiểm trên tiêu đề bảng và chọn hộp kiểm này, tất cả các hàng trên bảng sẽ được chọn. Bỏ chọn hộp kiểm tiêu đề sẽ bỏ chọn hộp kiểm
Chúng tôi đang sử dụng jQuery để kiểm tra hoặc kiểm tra hộp kiểm. Nếu người dùng chọn thủ công tất cả các hộp kiểm cho các hàng trên bảng thì hộp kiểm trong tiêu đề bảng sẽ được kiểm tra tự động để cho biết rằng tất cả các hộp kiểm trên thân bảng đều được chọn. Nếu bất kỳ hộp kiểm nào trên thân bảng không được chọn, hộp kiểm tiêu đề sẽ tự động được bỏ chọn
điều kiện tiên quyết
jQuery3. 5. 0
Bảng dữ liệu
Đầu tiên chúng ta sẽ xem cách đưa một số dữ liệu mẫu hoặc sản phẩm vào bảng HTML. Chúng tôi viết mã dưới đây vào một tệp có tên select-multiple-rows-html-table-jquery. html
Chúng tôi đã bao gồm jQuery từ liên kết CDN và mã jQuery bắt buộc từ ứng dụng. tập tin js. Chúng tôi cũng đã bao gồm bảng tệp CSS. css để áp dụng một số kiểu cơ bản trên bảng HTML
Chúng tôi đã đặt 8 hàng trong thân bảng và một tiêu đề. Trong tiêu đề, chúng tôi đã đặt một hộp kiểm để kiểm tra tất cả các hộp kiểm trong phần thân bảng. Chúng tôi cũng có hộp kiểm riêng lẻ để chọn hàng riêng lẻ
Chúng tôi đã đặt name
cho mỗi hộp kiểm và value
với id sản phẩm
Multiple Table Rows Selection Example using jQuery
Multiple Table Rows Selection Example using jQuery
ID
Code
Name
Price
1
AMTR01
American Tourist
12000
2
USB02
EXP Portable Hard Drive
5000
3
SH03
Shoes
1000
4
LPN4
XP 1155 Intel Core Laptop
80000
5
3DCAM01
FinePix Pro2 3D Camera
150000
6
MB06
Simple Mobile
3000
7
WristWear03
Luxury Ultra thin Wrist Watch
3000
8
HD08
Headphone
400
Kiểm tra/bỏ chọn bằng jQuery
Bây giờ chúng ta sẽ viết mã jQuery trong ứng dụng. js để kiểm tra hoặc bỏ chọn các hộp kiểm
Nếu chúng tôi nhấp vào hộp kiểm tiêu đề thì chúng tôi chọn tất cả các hộp kiểm trên thân bảng
Nếu chúng tôi kiểm tra từng hộp kiểm theo cách thủ công và khi chúng tôi kiểm tra tất cả các hộp kiểm cuối cùng thì chúng tôi cũng kiểm tra hộp kiểm tiêu đề
$[function[] {
//If check_all checked then check all table rows
$["#check_all"].on["click", function [] {
if [$["input:checkbox"].prop["checked"]] {
$["input:checkbox[name='row-check']"].prop["checked", true];
} else {
$["input:checkbox[name='row-check']"].prop["checked", false];
}
}];
// Check each table row checkbox
$["input:checkbox[name='row-check']"].on["change", function [] {
var total_check_boxes = $["input:checkbox[name='row-check']"].length;
var total_checked_boxes = $["input:checkbox[name='row-check']:checked"].length;
// If all checked manually then check check_all checkbox
if [total_check_boxes === total_checked_boxes] {
$["#check_all"].prop["checked", true];
}
else {
$["#check_all"].prop["checked", false];
}
}];
}];
áp dụng phong cách
Chúng tôi áp dụng một số kiểu cơ bản trên bảng HTML. Chúng tôi làm cho tiêu đề màu đen. Chúng tôi áp dụng màu trên các hàng chẵn hoặc lẻ của bảng HTML. Chúng tôi chuyển đổi chữ thường thành chữ in hoa cho tiêu đề