Cách kiểm tra/bỏ chọn hộp kiểm bằng JavaScript

Cach Kiem Tra/bo Chon Hop Kiem Bang Javascript

Hộp kiểm là một loại phần tử đầu vào HTML cho phép người dùng chọn một trong số các tùy chọn. Đôi khi, có thể xảy ra tình huống cần chọn hoặc bỏ chọn các hộp kiểm trong trường hợp điền vào bảng câu hỏi, bài kiểm tra hoặc một số ứng dụng cần kiểm tra đồng thời bất kỳ hoặc tất cả các quyền cụ thể để tiếp tục.

Bài viết này sẽ mô tả quy trình kiểm tra và bỏ chọn hộp kiểm bằng JavaScript.

Làm cách nào để Kiểm tra/Bỏ chọn Hộp kiểm bằng JavaScript?

Để chọn hoặc bỏ chọn các hộp kiểm trong JavaScript, hãy sử dụng “ đã kiểm tra ' thuộc tính. Đầu tiên, lấy tham chiếu của phần tử HTML “ hộp kiểm ” với sự giúp đỡ của nó được giao “ Tôi ' sử dụng ' getElementById() ” phương pháp, và sau đó, áp dụng “ đã kiểm tra ” tài sản trên giá trị của nó.







Ví dụ 1: Chọn/Bỏ chọn Hộp kiểm Đơn
Đầu tiên, tạo một tệp HTML, với các dòng mã sau:



< h3 > Nhấp vào các nút để chọn hoặc bỏ chọn hộp kiểm h3 >
< kiểu đầu vào = 'hộp kiểm' Tôi = 'hộp kiểm' > Đồng ý với các điều khoản và điều kiện < anh >< anh >
< loại nút = 'cái nút' trong một cái nhấp chuột = 'kiểm tra()' > Đúng cái nút >
< loại nút = 'cái nút' trong một cái nhấp chuột = 'bỏ chọn ()' > Không cái nút >

Trong đoạn mã trên:



  • Tạo một hộp kiểm, với id “ hộp kiểm ” sẽ được sử dụng để truy cập phần tử “ hộp kiểm ” để thực hiện các hành động.
  • Tạo hai nút, “ Đúng ' và ' Không ”, để chọn hoặc bỏ chọn hộp kiểm sẽ kích hoạt chức năng “ kiểm tra() ' và ' bỏ chọn() ” tương ứng trên sự kiện nhấp chuột.

Sau khi thực thi đoạn mã trên, đầu ra sẽ như thế này:





Tiếp theo, xác định các chức năng để thực hiện các hành động trên hộp kiểm trong tệp JavaScript hoặc thẻ. Để chọn hộp kiểm, hãy sử dụng các dòng mã bên dưới:



hàm số kiểm tra ( ) {
để đầu vào = tài liệu. getElementById ( 'hộp kiểm' ) ;
đầu vào. đã kiểm tra = thật ;
}

Trong đoạn mã trên:

  • Định nghĩa một chức năng “ kiểm tra() ” sẽ kích hoạt thao tác nhấp vào nút để chọn hộp kiểm.
  • Bên trong phần thân của hàm, lấy tham chiếu của hộp kiểm bằng cách sử dụng id của nó “ hộp kiểm ” với sự giúp đỡ của “ getElementById() ” phương thức và lưu trữ nó trong một biến “ đầu vào ”.
  • Chọn hộp kiểm bằng cách đặt “ đã kiểm tra ' tài sản ' thật ”.

Để bỏ chọn hộp kiểm bằng cách nhấp vào nút “ Không ”, hãy sử dụng mã được cung cấp bên dưới:

hàm số bỏ chọn ( ) {
để đầu vào = tài liệu. getElementById ( 'hộp kiểm' ) ;
đầu vào. đã kiểm tra = sai ;
}

Đoạn mã trên:

  • Định nghĩa một chức năng “ bỏ chọn() ” sẽ kích hoạt nhấp vào nút để bỏ chọn hộp kiểm.
  • Bên trong phần thân của hàm, lấy tham chiếu của hộp kiểm bằng cách sử dụng id của nó “ hộp kiểm ” với sự giúp đỡ của “ getElementById() ” phương thức và lưu trữ nó trong một biến “ đầu vào ”.
  • Bỏ chọn hộp kiểm bằng cách đặt “ đã kiểm tra ' tài sản ' sai ”.

Cuối cùng, xác định một chức năng để bỏ chọn hộp kiểm theo mặc định khi tải trang bằng cách sử dụng “ cửa sổ.onload ' Sự kiện:

cửa sổ. đang tải = hàm số ( ) {
cửa sổ. addEventListener ( 'trọng tải' , kiểm tra , sai ) ;
}

đầu ra

Đầu ra biểu thị rằng hộp kiểm đã được chọn và bỏ chọn thành công khi nhấp vào các nút.

Ví dụ 2: Chọn/Bỏ chọn nhiều hộp kiểm
Hãy xem một ví dụ về cách chọn hoặc bỏ chọn tất cả các hộp kiểm cùng một lúc.

Đầu tiên, tạo một tệp HTML, sau đó tạo nhiều hộp kiểm và một nút có id “ chuyển đổi ” sẽ chuyển đổi hộp kiểm để kiểm tra hoặc bỏ chọn:

< h3 > Nhấp vào nút để kiểm tra hoặc bỏ chọn tất cả các hộp kiểm h3 >
< kiểu đầu vào = 'hộp kiểm' lớp = 'hộp kiểm' > Kiểm tra hoặc bỏ chọn tôi < anh >
< kiểu đầu vào = 'hộp kiểm' lớp = 'hộp kiểm' > Kiểm tra hoặc bỏ chọn tôi < anh >
< kiểu đầu vào = 'hộp kiểm' lớp = 'hộp kiểm' > Kiểm tra hoặc bỏ chọn tôi < anh >
< kiểu đầu vào = 'hộp kiểm' lớp = 'hộp kiểm' > Kiểm tra hoặc bỏ chọn tôi < anh >
< kiểu đầu vào = 'hộp kiểm' lớp = 'hộp kiểm' > Kiểm tra hoặc bỏ chọn tôi < anh >< anh >
< kiểu đầu vào = 'cái nút' Tôi = 'chuyển đổi' giá trị = 'Nhấp để chuyển các hộp kiểm' >

Đầu ra tương ứng sẽ là:

Sau đó, trong tệp JavaScript hoặc thẻ