2 hộp kiểm đầu tiên có thuộc tính checked
, vì vậy chúng ta sẽ lấy giá trị của 2 hộp kiểm đầu tiên cùng với nó
Sau đó, chúng tôi đăng nhập thuộc tính value
Chúng tôi trải checked
NodeList thành một mảng
Sau đó, chúng tôi gọi map
với một cuộc gọi lại để trả lại thuộc tính value
của mỗi hộp kiểm được chọn
Do đó, nhật ký bảng điều khiển sẽ ghi nhật ký [“1”, “2”]
Chúng tôi có thể lấy giá trị của tất cả các hộp kiểm đã chọn bằng JavaScript đơn giản
Thêm nội dung tại PlainEnglish. io. Đăng ký nhận bản tin hàng tuần miễn phí của chúng tôi. Theo dõi chúng tôi trên Twitter và LinkedIn. Tham gia cộng đồng của chúng tôi
Trong bài viết này, bạn sẽ tìm hiểu cách lấy tất cả giá trị hộp kiểm đã chọn trong Javascript. Chúng tôi sẽ đề cập đến tất cả các trường hợp sử dụng hộp kiểm và lấy dữ liệu của chúng trong Javascript
Hộp kiểm là các hộp được sử dụng để chọn hoặc bỏ chọn một tùy chọn. Chúng thường được sử dụng trong biểu mẫu, chẳng hạn như hộp kiểm trong biểu mẫu để chọn một tùy chọn hoặc nhiều tùy chọn.
Chúng khác với các nút radio trong đó chỉ có thể chọn một tùy chọn tại một thời điểm. Các hộp kiểm có thể được sử dụng để chọn nhiều tùy chọn
Hộp kiểm là phần tử đầu vào có type="checkbox" . Chúng có thuộc tính tên được sử dụng để nhóm nhiều hộp kiểm cho một mục đích và một giá trị attribute that is used to store the value of the checkbox.
Bạn có thể sử dụng thuộc tính tên để chọn tất cả các hộp kiểm của cùng một nhóm
Mục lục
Chọn tất cả các hộp kiểm trong một nhóm
Để chọn tất cả các hộp kiểm của một nhóm, bạn có thể sử dụng thuộc tính tên của chúng
Để chọn một phần tử theo thuộc tính tên của phần tử, bạn có thể sử dụng tài liệu . phương thức getElementsByName[] . Nó trả về một mảng các phần tử với thuộc tính tên được chỉ định.
Trong ví dụ bên dưới, chúng tôi đang chọn tất cả các hộp kiểm của một nhóm chỉ bằng một lần bấm nút và lưu trữ các giá trị của chúng trong một mảng
Ví dụ
Choose Language you can work with:
HTML
CSS
Milk [food]
JavaScript
PHP
Python
Vegetable [food]
Ruby
Select All
function selectAll[] {
// selecting all checkboxes
// of group language
var checkboxes = document.getElementsByName['language'];
var values = [];
// looping through all checkboxes
for [var i = 0; i < checkboxes.length; i++] {
checkboxes[i].checked = true;
values.push[checkboxes[i].value];
}
alert[values];
}
▶ Hãy thử
Bạn có thể thấy trong kết quả bên dưới, chỉ các hộp kiểm thuộc về ngôn ngữ nhóm được chọn
đầu ra
Chọn Ngôn ngữ bạn có thể làm việc với
HTMLCSS
Sữa [thực phẩm]
JavaScript
PHP
con trăn
Rau [thực phẩm]
hồng ngọc
Chọn tất cả
Một cách khác để chọn các hộp kiểm của một nhóm là sử dụng phương thức querySelectorAll[]. Nó trả về một NodeList gồm các phần tử có thuộc tính tên được chỉ định
Để chọn các hộp kiểm của ngôn ngữ nhóm, bạn có thể áp dụng tài liệu . querySelectorAll['input[name="language"]'] .
Ví dụ
// selecting all checkboxes
// of group language using querySelectorAll[]
var checkboxes = document.querySelectorAll['input[name="language"]'];
var values = [];
// looping through all checkboxes
for [var i = 0; i < checkboxes.length; i++] {
checkboxes[i].checked = true;
values.push[checkboxes[i].value];
}
alert[values];
▶ Hãy thử
đầu ra
Chọn các hộp kiểm đã chọn của một nhóm
Khi người dùng đã đưa ra lựa chọn của họ trong các hộp kiểm thì bạn cần lấy những dữ liệu đó và thực hiện một số hành động trên đó
Để nhận tất cả các giá trị hộp kiểm đã chọn trong Javascript, bạn có thể làm theo 2 cách
- Chọn bằng cách sử dụng thuộc tính đã chọn của hộp kiểm.
- Chọn bằng bộ chọn CSS . đã chọn .
1. Chọn bằng cách sử dụng thuộc tính đã chọn của hộp kiểm
Để chọn tất cả các hộp kiểm đã chọn của một nhóm, trước tiên hãy chọn tất cả các hộp kiểm của một nhóm rồi lặp qua tất cả các hộp kiểm và lấy giá trị thuộc tính đã chọn của chúng.
Nếu giá trị trả về là đúng thì hộp kiểm được chọn. Bạn có thể lưu trữ nó trong một mảng để sử dụng tiếp
Ví dụ
// selecting all checkboxes
// of group language using querySelectorAll[]
var checkboxes = document.querySelectorAll['input[name="language"]'];
var values = [];
// looping through all checkboxes
// if checked property is true then push
for [var i = 0; i < checkboxes.length; i++] {
if [checkboxes[i].checked == true] {
values.push[checkboxes[i].value];
}
}
alert[values];
▶ Hãy thử
đầu ra
Chọn ngôn ngữ bạn có thể làm việc và nhấp vào nút để nhận các hộp đã chọn
HTMLCSS
JavaScript
PHP
con trăn
hồng ngọc
Nhận các tùy chọn đã chọn
2. Chọn bằng bộ chọn CSS . đã chọn
Có một cách khác để chọn tất cả các hộp kiểm đã chọn của một nhóm. Đó là bằng cách sử dụng bộ chọn CSS
:checked là bộ chọn CSS giả có thể chọn hộp kiểm được chọn.
Sử dụng điều này với phương pháp querySelectorAll[] để chọn tất cả các hộp kiểm của một nhóm.
Ví dụ
// selecting all checkboxes
// of group language using :checked pseudo selector
var checkboxes = document.querySelectorAll['input[name="language"]:checked'];
// get values of all checked checkboxes
var values = [...checkboxes].map[checkbox => checkbox.value];
alert[values];
▶ Hãy thử
đầu ra
Chọn Ngôn ngữ bạn có thể làm việc sau đó nhấp vào nút
HTMLCSS
JavaScript
PHP
con trăn
hồng ngọc
Nhận các tùy chọn đã chọn
Chọn tất cả các hộp kiểm của toàn bộ tài liệu
Sẽ có một cách tiếp cận tương tự để chọn tất cả các hộp kiểm của toàn bộ tài liệu. Ở đây thay vì nhắm mục tiêu một nhóm hộp kiểm, chúng tôi sẽ nhắm mục tiêu tất cả các hộp kiểm của toàn bộ tài liệu
Trong khi sử dụng phương thức querySelectorAll[] , chúng ta có thể nhắm mục tiêu tất cả các hộp kiểm của toàn bộ tài liệu bằng cách sử dụng bộ chọn input:checked .
Ví dụ
// selecting all checkboxes
// of entire document using querySelectorAll[]
var checkboxes = document.querySelectorAll['input:checked'];
// get values of all checked checkboxes
var values = [...checkboxes].map[checkbox => checkbox.value];
alert[values];
▶ Hãy thử
đầu ra
Nếu có bất kỳ hộp kiểm nào trong tài liệu này được chọn thì nó sẽ được hiển thị
HTMLSữa
Khoai tây chiên
Dầu gội đầu
CSS
Bánh mỳ
Kẹo
Nhận các tùy chọn đã chọn
kết luận
Trong hướng dẫn ngắn này, chúng ta đã thấy cách chọn tất cả giá trị hộp kiểm đã chọn trong JavaScript với các tình huống khác nhau. Như chọn tất cả các hộp kiểm của một nhóm, chọn tất cả các hộp kiểm đã chọn của một nhóm, chọn tất cả các hộp kiểm đã chọn của toàn bộ tài liệu, v.v.