Nhận hộp kiểm giá trị đã chọn JavaScript

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”]

Phần kết luận

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

▶ 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

HTML
CSS
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

1. Chọn bằng cách sử dụng thuộc tính đã chọn của hộp kiểm.
2. 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

HTML
CSS
JavaScript
PHP
con trăn
hồng ngọc
Nhận các tùy chọn đã chọn

---

báo cáo quảng cáo này

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

HTML
CSS
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ị

HTML
Sữ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.

Làm cách nào để nhận giá trị của hộp kiểm đã chọn trong JavaScript?

Làm cách nào để kiểm tra xem hộp kiểm có được chọn không JavaScript?

Làm thế nào để có được giá trị trong hộp kiểm?

Làm cách nào để xác thực hộp kiểm trong JavaScript?