Bài viết này sẽ trình bày các phương pháp kiểm tra và bỏ chọn tất cả các hộp kiểm bằng JavaScript.
Làm thế nào để Kiểm tra và Bỏ chọn Tất cả các Hộp kiểm bằng JavaScript?
Để chọn và bỏ chọn tất cả các hộp kiểm trong JavaScript, bạn có thể áp dụng:
Các cách tiếp cận được đề cập bây giờ sẽ được thảo luận từng cái một!
Phương pháp 1: Chọn và Bỏ chọn Tất cả các Hộp kiểm trong JavaScript Sử dụng Phương pháp “document.getElementsByName ()” Với “Hộp kiểm”
Các ' document.getElementsByName () ”Phương thức trả về các phần tử có tên được chỉ định trong các đối số của nó. Phương pháp này sẽ được áp dụng để tìm nạp giá trị của mỗi hộp kiểm với sự trợ giúp của tên đã chuyển.
Hãy xem qua ví dụ sau để minh họa.
Thí dụ
Đầu tiên, loại đầu vào sẽ được chỉ định là “ hộp kiểm ”Và một tên và giá trị cụ thể sẽ được chỉ định cho mỗi hộp kiểm:
< kiểu đầu vào = 'hộp kiểm' Tên = 'chỉ' giá trị = 'Python' > Python < br />< kiểu đầu vào = 'hộp kiểm' Tên = 'chỉ' giá trị = 'Java' > Java < br />
< kiểu đầu vào = 'hộp kiểm' Tên = 'chỉ' giá trị = 'JavaScript' > JavaScript < br />
Bây giờ, hãy thêm một hộp kiểm bổ sung với giá trị “ Rà soát tất cả ”Và đính kèm một“ trong một cái nhấp chuột() Sự kiện 'với hộp kiểm này sẽ hoạt động theo cách khi hộp kiểm sẽ được nhấp vào,' checkUnchecked () ”Phương thức sẽ được gọi với đối tượng“ đây ”Như một đối số:
< kiểu đầu vào = 'hộp kiểm' trong một cái nhấp chuột = 'checkUncheck (this)' /> Rà soát tất cả < br />
Sau đó, xác định một hàm có tên là “ checkUncheck () ”Trong tệp JavaScript, với một biến có tên là“ checkBox ”Như một lập luận. Bây giờ, hãy truy cập các giá trị hộp kiểm bằng cách sử dụng “ document.getElementsByName () 'Và đặt giá trị của' Tên Thuộc tính ”làm đối số của nó.
Cuối cùng, hãy áp dụng “ vì 'Vòng lặp để lặp lại dọc theo tất cả các giá trị hộp kiểm và sử dụng' đã kiểm tra ”Để đánh dấu tất cả chúng là đã kiểm tra:
kiểm tra chức năng ( checkBox ) {lấy = tài liệu. getElementsByName ( 'chỉ' ) ;
vì ( đã ở = 0 ; tôi < lấy. chiều dài ; tôi ++ ) {
lấy [ tôi ] . đã kiểm tra = checkBox. đã kiểm tra ; }
}
Như bạn có thể thấy, khi “ Rà soát tất cả Hộp kiểm ”được đánh dấu, tất cả các hộp kiểm khác cũng được đánh dấu là đã chọn:
Phương pháp 2: Chọn và bỏ chọn tất cả các hộp kiểm trong JavaScript Sử dụng phương pháp “document.getElementsByName ()” Với “Buttons”
Các ' document.getElementsByName () ”, Như đã thảo luận trong phương thức trước, tìm nạp các phần tử có tên được chỉ định trong các đối số của nó. Nó có thể được sử dụng để chọn hoặc bỏ chọn tất cả các hộp kiểm đã thêm trên một trang web.
Nhìn vào ví dụ sau để minh họa.
Thí dụ
Bây giờ, chúng tôi sẽ bao gồm hai nút cho cả hai nút “ Kiểm tra tất cả ' và ' Bỏ chọn tất cả ”Chức năng. Sau đó, đính kèm “ trong một cái nhấp chuột ”Với cả hai nút sẽ truy cập các chức năng được chỉ định riêng biệt:
< kiểu đầu vào = 'cái nút' trong một cái nhấp chuột = 'kiểm tra()' giá trị = 'Kiểm tra tất cả' />< kiểu đầu vào = 'cái nút' trong một cái nhấp chuột = 'unCheck ()' giá trị = 'Bỏ chọn tất cả' />
Tiếp theo, xác định một hàm có tên là “ kiểm tra() ”Và áp dụng“ document.getElementsByName 'Với giá trị được chỉ định của' Tên ' thuộc tính. Sau đó, lặp lại “ vì ”Vòng lặp dọc theo tất cả các giá trị hộp kiểm được thảo luận trong phương pháp trước.
Hơn nữa, khi nút được liên kết được nhấp vào, “ đã kiểm tra Thuộc tính ”sẽ đánh dấu tất cả các hộp kiểm và đặt trạng thái đã chọn là“ thật ”:
Kiểm tra chức năng ( ) {là con dê = tài liệu. getElementsByName ( 'kiểm tra' ) ;
vì ( đã ở = 0 ; tôi < lấy. chiều dài ; tôi ++ ) {
lấy [ tôi ] . đã kiểm tra = thật ; }
}
Tiếp theo, xác định một hàm có tên là “ unCheck () ”Và thêm chức năng đảo ngược vào đó để đánh dấu thuộc tính hộp kiểm là“ sai ”:
chức năng bỏ kiểm tra ( ) {là con dê = tài liệu. getElementsByName ( 'kiểm tra' ) ;
vì ( đã ở = 0 ; tôi < lấy. chiều dài ; tôi ++ ) {
lấy [ tôi ] . đã kiểm tra = sai ; }
}
Nó có thể thấy trong đầu ra rằng các nút được thêm vào đang hoạt động hoàn hảo:
Chúng tôi đã cung cấp các phương pháp dễ nhất để kiểm tra và bỏ chọn tất cả các hộp kiểm bằng JavaScript.
Sự kết luận
Để chọn và bỏ chọn tất cả các hộp kiểm sử dụng JavaScript, hãy sử dụng “ document.getElementsByName () 'Phương pháp với' Hộp kiểm ”Để thêm hộp kiểm và truy cập chức năng, điều này sẽ dẫn đến việc chọn hộp kiểm hoặc áp dụng cùng một phương pháp với“ nút ”Để bao gồm hai nút riêng biệt để kiểm tra và bỏ chọn tất cả các giá trị được chỉ định. Bản ghi này giải thích các phương pháp kiểm tra và bỏ chọn tất cả các hộp kiểm bằng JavaScript.