Trong hướng dẫn này, chúng ta sẽ học cách kiểm tra xem hộp kiểm có được kiểm tra trong JavaScript hay không. Hộp kiểm là loại đầu vào trong HTML, hoạt động như hộp lựa chọn. Các nút radio cùng nhóm cho phép người dùng chỉ chọn một giá trị. Tuy nhiên, hộp kiểm thuộc cùng một nhóm cho phép người dùng chọn nhiều giá trị
Ngoài ra, bạn có nhiều cách sử dụng các hộp kiểm trong tâm trí của mình. HTML có thể thêm hộp kiểm vào trang web, nhưng để thêm hành vi vào hộp kiểm, chúng tôi phải sử dụng JavaScript. Các lập trình viên có thể thêm các hành vi khác nhau vào hộp kiểm dựa trên việc hộp kiểm đó có được chọn hay không
Sau đây, chúng ta sẽ học cách kiểm tra các hộp kiểm đơn và nhiều có được chọn hay không
Kiểm tra xem một Hộp kiểm duy nhất có được chọn hay không
Trong phần này, chúng ta sẽ học cách kiểm tra xem hộp kiểm có được chọn hay không. 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
cú pháp
Người dùng có thể làm theo cú pháp dưới đây để kiểm tra hộp kiểm duy nhất có được chọn hay không
let checkbox = document.getElementById["checkbox_id"]; let checkbox.checked; // it returns Boolean value
Thí dụ
Trong ví dụ dưới đây, chúng tôi đã tạo hộp kiểm. Ngoài ra, chúng tôi đã thêm trình xử lý sự kiện vào hộp kiểm. Khi người dùng thay đổi giá trị của hộp kiểm, trình xử lý sự kiện sẽ được gọi. Trong trình lắng nghe sự kiện, chúng tôi sẽ kiểm tra xem hộp kiểm có được chọn hay không. Nếu hộp kiểm được chọn, chúng tôi sẽ hiển thị một số văn bản cho div nếu không chúng tôi sẽ làm cho div trống
Check whether the Checkbox is checked or not
Check whether the Checkbox is checked or not using .checked attribute
Check the below checkbox to see the text div
Ở kết quả trên, người dùng có thể thấy rằng khi họ chọn hộp kiểm, hộp kiểm sẽ hiển thị thông báo “hộp kiểm đã được chọn. ” Khi họ bỏ chọn hộp kiểm, nó không hiển thị gì
Kiểm tra xem nhiều hộp kiểm có được chọn hay không
Thật đơn giản để thêm hành vi vào một hộp kiểm. Trên nhiều trang web, bạn đã thấy rằng khi bạn nhìn thấy cửa sổ bật lên để chấp nhận các điều khoản & điều kiện, nó có nhiều hộp kiểm và khi bạn chọn tất cả các hộp kiểm, chỉ có hộp đó bật nút chấp nhận
Ở đây, chúng ta sẽ làm điều tương tự. Chúng tôi sẽ tạo nhiều hộp kiểm và kiểm tra tất cả các hộp kiểm xem nó có được chọn hay không và trên cơ sở đó, chúng tôi sẽ bật nút
cú pháp
Truy cập tất cả các hộp kiểm và nút
let checkbox = document.getElementsByName[ "checkbox" ]; let button = document.getElementById[ "btn" ];
Thêm trình xử lý sự kiện vào mọi hộp kiểm
for [ let i = 0; i < checkbox.length; i++ ] { checkbox[i].addEventListener[ "change", [] => { }]; }
Bên trong trình lắng nghe sự kiện, kiểm tra tất cả các hộp kiểm có được chọn hay không
button.disabled = false; for [ let i = 0; i < checkbox.length; i++ ] { if [ checkbox[i].checked == false ] // if any single checkbox is unchecked, disable the button. button.disabled = true; }
Thí dụ
Trong ví dụ dưới đây, chúng tôi đã tạo ba hộp kiểm có cùng tên, có nghĩa là tất cả thuộc về cùng một nhóm. Ngoài ra, chúng tôi đã tạo nút trong HTML và nút truy cập và hộp kiểm bằng cách sử dụng id và tên trong JavaScript
Chúng tôi đã thêm một trình lắng nghe sự kiện trong tất cả các hộp kiểm. Khi bất kỳ giá trị hộp kiểm nào thay đổi, nó sẽ kiểm tra xem tất cả hộp kiểm có được chọn hay không. Nếu tất cả các hộp kiểm được chọn, trình xử lý sự kiện sẽ kích hoạt nút. Nếu không, nút vẫn bị vô hiệu hóa
Ở kết quả trên, người dùng có thể thấy rằng khi họ chọn tất cả các hộp kiểm, nút sẽ được bật, nếu không thì nút sẽ bị tắt
Trong hướng dẫn này, chúng ta đã học cách kiểm tra xem một hoặc nhiều hộp kiểm có được chọn hay không. Chúng tôi đã thêm các hành vi khác nhau vào trang web theo giá trị lựa chọn hộp kiểm
Ngoài ra, người dùng có thể sử dụng các thư viện JavaScript như jQuery, vì vậy người dùng cần ít nỗ lực hơn để kiểm tra nhiều hộp kiểm
thận trọng. Các đạo cụ hỗ trợ các chuỗi HTML [_______9_______0] có thể dễ bị tấn công Cross Site Scripting [XSS] khi chuyển các giá trị thô do người dùng cung cấp. Trước tiên, bạn phải vệ sinh đúng cách đầu vào của người dùng
Bộ chọn lớp giả của CSS :checked
đại diện cho bất kỳ phần tử radio [], hộp kiểm [_______12_______] hoặc tùy chọn [
trong phần tử
] được chọn hoặc chuyển sang trạng thái
Yes
No
Check me!
Apples
Grapes
Pears
0Người dùng có thể tương tác với trạng thái này bằng cách kiểm tra/chọn một phần tử hoặc hủy tương tác bằng cách bỏ chọn/bỏ chọn phần tử đó
Ghi chú. Bởi vì các trình duyệt thường coi các là các phần tử được thay thế, nên mức độ mà chúng có thể được tạo kiểu với lớp giả
:checked
thay đổi tùy theo trình duyệt
:checked
HTML
Yes
No
Check me!
Apples
Grapes
Pears
CSS
________số 8_______
Kết quả
Ví dụ này sử dụng lớp giả :checked
để cho phép người dùng chuyển đổi nội dung dựa trên trạng thái của hộp kiểm mà không cần sử dụng JavaScript