2 hộp kiểm đầu tiên có thuộc tính Show
Sau đó, chúng tôi đăng nhập thuộc tính Chúng tôi trải Sau đó, chúng tôi gọi Do đó, nhật ký bảng điều khiển sẽ ghi nhật ký 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ụ
▶ 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ụ
▶ Hãy thử đầu ra Chọn các hộp kiểm đã chọn của một nhómKhi 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Để 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ụ
▶ 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 báo cáo quảng cáo này 2. Chọn bằng bộ chọn CSS . đã chọnCó 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ụ
▶ 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ệuSẽ 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ụ
▶ 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ậnTrong 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?Bạn cũng có thể sử dụng mã bên dưới để nhận tất cả các giá trị hộp kiểm đã chọn. . tài liệu. getElementById('btn'). onclick = chức năng () { var đánh dấuCheckbox = tài liệu. querySelectorAll('input[type="checkbox"]. đã kiểm tra'); cho (hộp kiểm var của hộp kiểm được đánh dấu) { tài liệu. thân hình. nối thêm (hộp kiểm. giá trị + ' '); . Làm cách nào để kiểm tra xem hộp kiểm có được chọn không JavaScript?Trong JavaScript, chúng ta có thể truy cập phần tử hộp kiểm bằng id, lớp hoặc tên thẻ và áp dụng '. đã chọn' vào phần tử , trả về đúng hoặc sai dựa trên hộp kiểm được chọn.
Làm thế nào để có được giá trị trong hộp kiểm?Thuộc tính giá trị hộp kiểm đầu vào . Trả về giá trị của thuộc tính giá trị của hộp kiểm. getElementById("myCheck"). giá trị; Thay đổi giá trị được liên kết với hộp kiểm. getElementById("myCheck"). value = "newCheckboxValue"; Gửi biểu mẫu - cách thay đổi giá trị được liên kết với hộp kiểm. getElementById("myCheck") Làm cách nào để xác thực hộp kiểm trong JavaScript?Việc xác thực hộp kiểm trong javascript có thể được thực hiện bằng cách sử dụng thuộc tính được chọn của phần tử hộp kiểm . Thuộc tính này trả về true khi hộp kiểm được chọn. Phương thức addEventListener() có thể được sử dụng để áp dụng sự kiện thay đổi cho hộp kiểm để xác thực, bất cứ khi nào người dùng tương tác với hộp kiểm. |