Cách giữ hộp kiểm được chọn trong JavaScript

Tóm lược. trong hướng dẫn này, bạn sẽ học cách sử dụng JavaScript để kiểm tra xem hộp kiểm có được chọn hay không, lấy giá trị của các hộp kiểm đã chọn và chọn/bỏ chọn tất cả các hộp kiểm

Tạo hộp kiểm HTML

Để tạo checkbox, bạn sử dụng phần tử

 Accept
Code language: HTML, XML [xml]

3 với

 Accept
Code language: HTML, XML [xml]

4 của

 Accept
Code language: HTML, XML [xml]

5 như sau

 Accept 
Code language: HTML, XML [xml]

Đó là một phương pháp hay để luôn liên kết hộp kiểm với nhãn để cải thiện khả năng sử dụng và khả năng truy cập. Bằng cách này, việc nhấp vào nhãn cũng sẽ kiểm tra hoặc bỏ chọn hộp kiểm

     Accept 
Code language: HTML, XML [xml]

Hoặc

  
 Accept 
Code language: HTML, XML [xml]

Lưu ý rằng giá trị của thuộc tính for của nhãn phải khớp với id của hộp kiểm

Những điều sau đây hoạt động nhưng là thực hành xấu, vì vậy bạn nên tránh nó

 Accept
Code language: HTML, XML [xml]

Kiểm tra xem hộp kiểm có được chọn không

Một hộp kiểm có hai trạng thái. đã kiểm tra và bỏ chọn

Để có được trạng thái của một hộp kiểm, bạn làm theo các bước sau

• Đầu tiên, chọn hộp kiểm bằng phương pháp DOM, chẳng hạn như

   Accept
  Code language: HTML, XML [xml]

  6 hoặc

   Accept
  Code language: HTML, XML [xml]

  7
• Sau đó, truy cập thuộc tính

   Accept
  Code language: HTML, XML [xml]

  8 của phần tử hộp kiểm. Nếu thuộc tính

   Accept
  Code language: HTML, XML [xml]

  8 của nó là

   Accept
  Code language: HTML, XML [xml]

  10, thì hộp kiểm được chọn;

Xem ví dụ sau

 Accept
Code language: HTML, XML [xml]

1

trong ví dụ này

Đầu tiên, tạo phần tử hộp kiểm HTML

 Accept
Code language: HTML, XML [xml]

3

Thứ hai, chọn hộp kiểm có id

 Accept
Code language: HTML, XML [xml]

11 và kiểm tra thuộc tính

 Accept
Code language: HTML, XML [xml]

8

 Accept
Code language: HTML, XML [xml]

6

Vì hộp kiểm không được chọn, bạn sẽ thấy

 Accept
Code language: HTML, XML [xml]

13 trong bảng điều khiển

 Accept
Code language: HTML, XML [xml]

8

Hãy xem xét một ví dụ khác

 Accept
Code language: HTML, XML [xml]

9

Trong ví dụ này, selector

 Accept
Code language: HTML, XML [xml]

14 chọn phần tử có id

 Accept
Code language: HTML, XML [xml]

11 và có thuộc tính

 Accept
Code language: HTML, XML [xml]

8. Ví dụ: nó khớp với phần tử sau

 Accept
Code language: HTML, XML [xml]

3

Nhưng không phải cái này

     Accept 
Code language: HTML, XML [xml]

0

Do đó, nếu phần tử hộp kiểm có id

 Accept
Code language: HTML, XML [xml]

11 được chọn, thì

 Accept
Code language: HTML, XML [xml]

18 sẽ trả về. Trên cửa sổ bảng điều khiển, bạn sẽ thấy giá trị

 Accept
Code language: HTML, XML [xml]

13 vì hộp kiểm không được chọn

 Accept
Code language: HTML, XML [xml]

8

Nhận giá trị hộp kiểm

Trang sau hiển thị một hộp kiểm và một nút. Khi bạn nhấp vào nút, bạn sẽ thấy giá trị của hộp kiểm trên cửa sổ bảng điều khiển

     Accept 

  

Code language: HTML, XML [xml]

2

Khi bạn nhận được thuộc tính

 Accept
Code language: HTML, XML [xml]

30 của hộp kiểm, bạn luôn nhận được chuỗi

 Accept
Code language: HTML, XML [xml]

31 cho dù hộp kiểm đó có được chọn hay không

Nhận giá trị của nhiều hộp kiểm đã chọn

Trang sau hiển thị ba hộp kiểm. Nếu bạn chọn một hoặc nhiều hộp kiểm và nhấp vào nút, nó sẽ hiển thị các giá trị của hộp kiểm đã chọn

     Accept 
Code language: HTML, XML [xml]

3

Làm thế nào nó hoạt động

Trong HTML, chúng tôi tạo ba phần tử hộp kiểm có cùng tên [màu] nhưng các giá trị khác nhau

     Accept 
Code language: HTML, XML [xml]

4

trong JavaScript

Đầu tiên, thêm trình xử lý sự kiện nhấp chuột vào nút

     Accept 
Code language: HTML, XML [xml]

5

Thứ hai, chọn các hộp kiểm đã chọn bằng phương pháp

 Accept
Code language: HTML, XML [xml]

32 bên trong trình xử lý sự kiện nhấp chuột

     Accept 
Code language: HTML, XML [xml]

6

Thứ ba, đẩy các giá trị của các hộp kiểm đã chọn vào một mảng

     Accept 
Code language: HTML, XML [xml]

7

Thử nghiệm

Kiểm tra / Bỏ chọn tất cả các hộp kiểm

Trang sau có ba hộp kiểm và một nút. Khi bạn nhấp vào nút, nếu các hộp kiểm được chọn, chúng sẽ được bỏ chọn và ngược lại

     Accept 
Code language: HTML, XML [xml]

8

Làm thế nào nó hoạt động

Đầu tiên, xác định hàm

 Accept
Code language: HTML, XML [xml]

33 kiểm tra hoặc bỏ chọn tất cả các hộp kiểm có tên

 Accept
Code language: HTML, XML [xml]

34

     Accept 
Code language: HTML, XML [xml]

9

Khi bạn nhấp vào nút, nó sẽ kiểm tra tất cả các hộp kiểm. Và. Nếu bạn nhấp lại vào nút, nó sẽ bỏ chọn tất cả các hộp kiểm. Để thực hiện việc chuyển đổi này, bạn cần chỉ định lại trình xử lý sự kiện nhấp chuột bất cứ khi nào sự kiện nhấp chuột kích hoạt

Thứ hai, chọn nút

 Accept
Code language: HTML, XML [xml]

35 và gán chức năng

 Accept
Code language: HTML, XML [xml]

36 cho thuộc tính

 Accept
Code language: HTML, XML [xml]

37 của nút

  
 Accept 
Code language: HTML, XML [xml]

0

Thứ ba, xác định hàm

 Accept
Code language: HTML, XML [xml]

36 kiểm tra tất cả các hộp kiểm

  
 Accept 
Code language: HTML, XML [xml]

1

Cuối cùng, xác định hàm

 Accept
Code language: HTML, XML [xml]

39 để bỏ chọn tất cả các hộp kiểm

  
 Accept 
Code language: HTML, XML [xml]

2

Thử nghiệm

Tạo các hộp kiểm động

Ví dụ sau đây cho thấy cách tạo hộp kiểm động bằng JavaScript

  
 Accept 
Code language: HTML, XML [xml]

3

đầu ra

  
 Accept 
Code language: HTML, XML [xml]

4

Làm thế nào nó hoạt động

Đầu tiên, xác định một mảng bao gồm ba chuỗi. Trong thực tế, bạn có thể có mảng xuất phát từ kết quả của lệnh gọi API

Làm cách nào để giữ hộp kiểm được chọn trong JavaScript?

Làm cách nào để xác thực hộp kiểm trong JavaScript?

Làm cách nào để đặt hộp kiểm được chọn theo mặc định trong JavaScript?

Làm cách nào để giữ nhiều hộp kiểm được chọn ngay cả sau khi làm mới trang?