Làm cách nào để kiểm tra hộp kiểm bằng JavaScript?
|
Để xác định xem hộp kiểm có được chọn hay không, hãy sử dụng thuộc tính "đã kiểm tra" của hộp kiểm. Thuộc tính được kiểm tra xuất giá trị boolean true nếu nó được kiểm tra; . Để xác minh, bạn có thể sử dụng hai quy trình khác nhau; . Trong sách hướng dẫn này, chúng tôi đã mô tả quy trình xác minh xem hộp kiểm có được chọn hay không bằng cách sử dụng JavaScript Show
Hộp kiểm là hộp lựa chọn cho phép người dùng đưa ra lựa chọn nhị phân (đúng hoặc sai) bằng cách kiểm tra và bỏ chọn hộp kiểm đó. Về cơ bản, hộp kiểm là một biểu tượng, thường được sử dụng trong các biểu mẫu và ứng dụng GUI để nhận một hoặc nhiều đầu vào từ người dùng
Hãy nhớ rằng hộp kiểm khác với nút radio và danh sách thả xuống vì nó cho phép nhiều lựa chọn cùng một lúc. Ngược lại, nút radio và trình đơn thả xuống cho phép chúng tôi chỉ chọn một trong số các tùy chọn đã cho Trong chương này, bây giờ chúng ta sẽ xem cách lấy tất cả giá trị hộp kiểm đã đánh dấu bằng JavaScript Tạo cú pháp hộp kiểmĐể tạo hộp kiểm, hãy sử dụng tab HTML và nhập = "hộp kiểm" bên trong tab như hình bên dưới - Mặc dù bạn cũng có thể tạo hộp kiểm bằng cách tạo đối tượng hộp kiểm thông qua JavaScript, nhưng phương pháp này hơi phức tạp. Chúng ta sẽ thảo luận về cả hai cách tiếp cận sau- ví dụTạo và nhận giá trị hộp kiểmTrong ví dụ này, chúng tôi sẽ tạo hai hộp kiểm nhưng với điều kiện là người dùng sẽ chỉ phải đánh dấu một hộp kiểm giữa chúng. Sau đó, chúng tôi sẽ lấy giá trị của hộp kiểm được đánh dấu. Xem mã dưới đây sao chép mã Kiểm tra nó ngay bây giờđầu ra Nếu bạn đánh dấu vào ô Có và sau đó nhấp vào nút Gửi, một thông báo sẽ hiển thị như hình bên dưới Nếu bạn nhấp vào nút Gửi mà không đánh dấu bất kỳ hộp kiểm nào, một thông báo lỗi sẽ được hiển thị Tương tự, bạn có thể kiểm tra đầu ra cho các điều kiện khác Nhận tất cả giá trị hộp kiểmBây giờ, bạn sẽ thấy cách lấy tất cả các giá trị hộp kiểm do người dùng đánh dấu. Xem ví dụ bên dưới sao chép mã Kiểm tra nó ngay bây giờđầu ra Bằng cách thực thi mã này, chúng tôi sẽ nhận được phản hồi như ảnh chụp màn hình bên dưới có một số ngôn ngữ lập trình mà bạn có thể chọn ngôn ngữ mà bạn biết Tại đây, bạn bấm vào nút Check all, nó sẽ đánh dấu tất cả các ô ngôn ngữ lập trình. Sau đó, nhấp vào nút Gửi để nhận phản hồi Mặc dù bạn có thể chọn từng ngôn ngữ bằng cách đánh dấu vào từng hộp kiểm rồi nhấp vào nút Gửi để nhận kết quả đầu ra. Khi bạn chưa chọn gì Nhận tất cả giá trị hộp kiểm được đánh dấu bằng phương thức querySelectorAll()Có một phương pháp khác để lấy tất cả các giá trị đã chọn từ các hộp kiểm do người dùng đánh dấu. Bây giờ bạn sẽ thấy cách lấy giá trị của tất cả các hộp kiểm bằng phương thức querySelectorAll() do người dùng đánh dấu. Thao tác này sẽ tìm nạp các giá trị hộp kiểm từ biểu mẫu HTML và hiển thị kết quả Nhận tất cả giá trị hộp kiểmBây giờ, bạn sẽ thấy cách lấy tất cả các giá trị hộp kiểm do người dùng đánh dấu. Xem ví dụ bên dưới sao chép mã Kiểm tra nó ngay bây giờđầu ra Tại đây, bạn có thể thấy rằng tất cả giá trị hộp kiểm được đánh dấu đã được trả lại Các mã JavaScript khác nhau để nhận giá trị hộp kiểm được đánh dấuMã JavaScript để nhận tất cả các giá trị hộp kiểm đã chọn Bạn cũng có thể sử dụng mã dưới đây để nhận tất cả các giá trị hộp kiểm đã chọn Vì vậy, các phần tử hộp kiểm cho phép đa lựa chọn. Điều này có nghĩa là người dùng có thể chọn một hoặc nhiều tùy chọn theo lựa chọn của họ được xác định trong biểu mẫu HTML. Thậm chí bạn có thể chọn tất cả các hộp kiểm. Trong ví dụ trên, bạn đã thấy rằng Để kiểm tra và bỏ chọn hộp kiểm, bạn có thể sử dụng các phương thức JavaScript hoặc jQuery được mô tả bên dưới Sử dụng đoạn mã sau để kiểm tra và bỏ chọn hộp kiểm bằng JavaScript jQuery cung cấp các phương thức attr() và prop() để hoàn thành tác vụ. Sự lựa chọn phụ thuộc vào các phiên bản jQuery. Hãy xem các ví dụ với từng người trong số họ Phương thức jQuery attr() có thể được sử dụng để kiểm tra và bỏ chọn hộp kiểm cho các phiên bản jQuery bên dưới 1. 5 Bạn có thể sử dụng phương thức prop() để chọn hoặc bỏ chọn hộp kiểm, chẳng hạn như khi nhấp vào nút. Phương thức yêu cầu jQuery 1. 6+ Trong trường hợp jQuery 1. 6, phương thức prop() cung cấp một cách để truy xuất các giá trị thuộc tính, trong khi phương thức attr() truy xuất các thuộc tính. Thuộc tính được kiểm tra là một thuộc tính boolean, có nghĩa là thuộc tính tương ứng là đúng nếu thuộc tính đó tồn tại, ngay cả khi thuộc tính không có giá trị hoặc được đặt thành giá trị chuỗi trống hoặc "sai". Điều quan trọng cần nhớ là thuộc tính được kiểm tra không tương ứng với thuộc tính được kiểm tra. Giá trị thuộc tính được kiểm tra không thay đổi theo trạng thái của hộp kiểm, trong khi thuộc tính được kiểm tra thay đổi Làm cách nào để kiểm tra hộp kiểm trong 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 cách nào để nhận giá trị đã chọn của hộp kiểm 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. cơ thể người. 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 hay bỏ chọn trong JavaScript không?Để xác định xem hộp kiểm có được chọn hay không, hãy sử dụng thuộc tính “đã chọn” của hộp kiểm . Thuộc tính được kiểm tra xuất giá trị boolean true nếu nó được kiểm tra; . Để xác minh, bạn có thể sử dụng hai quy trình khác nhau; .
Làm cách nào để đặt thuộc tính đã chọn của hộp kiểm trong JavaScript?Thuộc tính đã chọn hộp kiểm đầu vào . Đặt trạng thái đã chọn của hộp kiểm. chức năng kiểm tra() { tài liệu. . Tìm hiểu xem hộp kiểm có được chọn hay không. getElementById("myCheck"). đã kiểm tra; Sử dụng hộp kiểm để chuyển văn bản trong trường nhập thành chữ hoa. getElementById("tên"). . Một số hộp kiểm trong một biểu mẫu. cà phê var = tài liệu |
