Trong JavaScript, việc nhận giá trị hộp kiểm mang lại sự dễ dàng cho người dùng khi xác nhận các tùy chọn đã chọn. Hơn nữa, trong trường hợp gửi một biểu mẫu quan trọng, việc nhận giá trị hộp kiểm sẽ hỗ trợ nhập thông tin chính xác. Ngoài ra, việc chọn nhiều tùy chọn cho một câu trả lời trong bài kiểm tra hoặc bảng câu hỏi và nhận giá trị của hộp kiểm sẽ giúp tìm ra giải pháp chính xác
Bài viết này sẽ hướng dẫn bạn lấy/tìm nạp các giá trị hộp kiểm trong JavaScript
Làm cách nào để Nhận/Tìm nạp Giá trị Hộp kiểm trong Javascript?
Để nhận giá trị hộp kiểm trong JavaScript, bạn có thể sử dụng
- "tài liệu. phương thức querySelectorAll[]”
- "tài liệu. phương thức getElementById”
Bây giờ chúng ta sẽ đi qua từng phương pháp một
Phương pháp 1. Nhận giá trị hộp kiểm trong JavaScript bằng tài liệu. phương thức querySelectorAll[]
Tài liệu. phương thức querySelectorAll[]” trả về tất cả các phần tử khớp với bộ chọn CSS. Bạn cũng có thể sử dụng phương pháp này để chọn các giá trị hộp kiểm được chỉ định
cú pháp
tài liệu. querySelectorAll [ Bộ chọn CSS ]
Ở đây, "Bộ chọn CSS" đề cập đến tên hộp kiểm được xác định trong tệp HTML.
Đi qua ví dụ sau để minh họa
Ví dụ
Trong bước đầu tiên, chúng tôi sẽ chỉ định thuộc tính “nhãn cho” chỉ định nhãn cho phần tử HTML đầu vào của biểu mẫu. Sau đó, chúng tôi sẽ thêm loại đầu vào “hộp kiểm” để sử dụng hộp kiểm làm đầu vào. Bây giờ, chúng ta sẽ gán “tên”, “giá trị” và “id” cho mỗi hộp kiểm. Cuối cùng, chúng tôi cũng sẽ bao gồm một nút để nhận giá trị hộp kiểm. Quá trình này sẽ được lặp lại cho mỗi trong ba hộp kiểm
Chọn ngôn ngữ yêu thích của bạn
Python
Java
JavaScript
Get Selected subject
Trong bước tiếp theo, chúng tôi sẽ tìm nạp nút “id” bằng cách sử dụng “tài liệu. querySelector[]” và thêm sự kiện “click” vào nút. Tiếp theo, bao gồm “tài liệu. querySelectorAll[]” trong sự kiện nhấp chuột để chọn giá trị của các hộp kiểm được chỉ định. Cuối cùng, áp dụng phương thức “đẩy []” để hiển thị giá trị của từng hộp kiểm đã chọn bằng cách sử dụng “tài liệu. viết phương pháp.
nút const button= document.querySelector['#button'] ;
button.addEventListener['click' , [event] => {
let checkboxes= document.querySelectorAll['input[name="language"]. đã chọn'] ;
hãy . forEach= [];
checkboxes.forEach[[ hộp kiểm ] . đẩy > {
output.push[ hộp kiểm. value ] ;
}] . ghi;
document.write["Bạn đã chọn " , đầu ra ];
}];
Kết quả của việc triển khai ở trên sẽ dẫn đến.
Phương pháp 2. Nhận giá trị hộp kiểm trong JavaScript bằng tài liệu. Phương thức getElementById[]
Tài liệu. getElementById[]” trả về một phần tử có giá trị hoặc id được chỉ định. Nó cũng có thể được sử dụng để tìm nạp hộp kiểm “id” và trả về giá trị của từng hộp kiểm đã chọn
cú pháp
tài liệu. getElementById [ elementID ]
Ở đây, “elementID” đề cập đến giá trị id của một phần tử có giá trị được chọn sẽ được tìm nạp.
Hãy đi qua ví dụ sau đây để chứng minh
Ví dụ
Firstly, we will specify the input type to “checkbox” and assign the “id”, “class”, and “value” to each checkbox as discussed in the previous method. We will contain these functionalities in a tag named table data “
Chọn ngôn ngữ yêu thích của bạn
Python:
JavaScript: