Cách lưu giá trị hộp kiểm trong html

• Thiết kế
  • Giới thiệu
    • "Hàng không"
    • phong cách
  • di động
    • Nguyên tắc thiết kế
    • phong cách
    • Tổng quan về UX
    • mẫu thiết kế
    • Thành phần giao diện người dùng
    • 2. 3
  • TV
    • Nguyên tắc thiết kế
    • phong cách
    • Tổng quan về UX
    • hoa văn
    • Thành phần giao diện người dùng
  • có thể đeo được
• Sự phát triển
  • Studio Tizen
    • Tổng quan
    • Tải xuống
  • Tiện ích mở rộng Tizen cho Visual Studio Family
  • SDK mở rộng IoT
  • Tài liệu
• Blog
  • Blog
    • Thông báo về Tizen Studio 3. 1 bản phát hành
    • Thông báo về Tizen Studio 3. 7 Phát hành
• Cộng đồng
  • Mẹo & Công nghệ
    • Hướng Dẫn Phát Triển Ứng Dụng Tizen Native
    • Cách sử dụng API Tizen Native Place trong 4 bước
    • Cách sử dụng API mã hóa địa lý ngược bản địa Tizen trong 3 bước
    • Cách sử dụng API định tuyến gốc Tizen trong 3 bước
    • Cách sử dụng Tizen Native Geocode API trong 3 bước đơn giản
  • diễn đàn
    • Hỗ trợ chung
    • tizen. MẠNG LƯỚI
    • Phát triển ứng dụng web
    • Phát triển ứng dụng gốc
    • SDK và IDE
  • Đoạn mã
    • Đoạn mã web
    • Đoạn mã gốc
  • Dự án Tizen

• Thiết kế
  • Giới thiệu
    • "Hàng không"
    • phong cách
  • di động
    • Nguyên tắc thiết kế
    • phong cách
    • Tổng quan về UX
    • mẫu thiết kế
    • Thành phần giao diện người dùng
    • 2. 3
  • TV
    • Nguyên tắc thiết kế
    • phong cách
    • Tổng quan về UX
    • hoa văn
    • Thành phần giao diện người dùng
  • có thể đeo được
• Sự phát triển
  • Studio Tizen
    • Tổng quan
    • Tải xuống
  • Tiện ích mở rộng Tizen cho Visual Studio Family
  • SDK mở rộng IoT
  • Tài liệu
• Blog
  • Blog
    • Thông báo về Tizen Studio 3. 1 bản phát hành
    • Thông báo về Tizen Studio 3. 7 Phát hành
• Cộng đồng
  • Mẹo & Công nghệ
    • Hướng Dẫn Phát Triển Ứng Dụng Tizen Native
    • Cách sử dụng API Tizen Native Place trong 4 bước
    • Cách sử dụng API mã hóa địa lý ngược bản địa Tizen trong 3 bước
    • Cách sử dụng API định tuyến gốc Tizen trong 3 bước
    • Cách sử dụng Tizen Native Geocode API trong 3 bước đơn giản
  • diễn đàn
    • Hỗ trợ chung
    • tizen. MẠNG LƯỚI
    • Phát triển ứng dụng web
    • Phát triển ứng dụng gốc
    • SDK và IDE
  • Đoạn mã
    • Đoạn mã web
    • Đoạn mã gốc
  • Dự án Tizen

Hộp kiểm là hộp lựa chọn cho phép người dùng đưa ra lựa chọn nhị phân [đúng hoặc sai] bằng cách kiểm tra và bỏ chọn hộp kiểm đó. Về cơ bản, hộp kiểm là một biểu tượng, thường được sử dụng trong các biểu mẫu và ứng dụng GUI để nhận một hoặc nhiều đầu vào từ người dùng

• Nếu một hộp kiểm được đánh dấu hoặc kiểm tra, nó cho biết là đúng;
• Nếu một hộp kiểm không được đánh dấu hoặc không được kiểm tra, hộp kiểm đó có nghĩa là sai;

Hãy nhớ rằng hộp kiểm khác với nút radio và danh sách thả xuống vì nó cho phép nhiều lựa chọn cùng một lúc. Ngược lại, nút radio và trình đơn thả xuống cho phép chúng tôi chỉ chọn một trong số các tùy chọn đã cho

Trong chương này, bây giờ chúng ta sẽ xem cách lấy tất cả giá trị hộp kiểm đã đánh dấu bằng JavaScript

Tạo cú pháp hộp kiểm

Để tạo hộp kiểm, hãy sử dụng tab HTML và nhập = "hộp kiểm" bên trong tab như hình bên dưới -

Mặc dù bạn cũng có thể tạo hộp kiểm bằng cách tạo đối tượng hộp kiểm thông qua JavaScript, nhưng phương pháp này hơi phức tạp. Chúng ta sẽ thảo luận về cả hai cách tiếp cận sau-

ví dụ

Tạo và nhận giá trị hộp kiểm

Trong ví dụ này, chúng tôi sẽ tạo hai hộp kiểm nhưng với điều kiện là người dùng sẽ chỉ phải đánh dấu một hộp kiểm giữa chúng. Sau đó, chúng tôi sẽ lấy giá trị của hộp kiểm được đánh dấu. Xem mã dưới đây

sao chép mã

đầu ra

Nếu bạn đánh dấu vào ô Có và sau đó nhấp vào nút Gửi, một thông báo sẽ hiển thị như hình bên dưới

Nếu bạn nhấp vào nút Gửi mà không đánh dấu bất kỳ hộp kiểm nào, một thông báo lỗi sẽ được hiển thị

Tương tự, bạn có thể kiểm tra đầu ra cho các điều kiện khác

Nhận tất cả giá trị hộp kiểm

Bây giờ, bạn sẽ thấy cách lấy tất cả các giá trị hộp kiểm do người dùng đánh dấu. Xem ví dụ bên dưới

sao chép mã

đầu ra

Bằng cách thực thi mã này, chúng tôi sẽ nhận được phản hồi như ảnh chụp màn hình bên dưới có một số ngôn ngữ lập trình mà bạn có thể chọn ngôn ngữ mà bạn biết

Tại đây, bạn bấm vào nút Check all, nó sẽ đánh dấu tất cả các ô ngôn ngữ lập trình. Sau đó, nhấp vào nút Gửi để nhận phản hồi

Mặc dù bạn có thể chọn từng ngôn ngữ bằng cách đánh dấu vào từng hộp kiểm rồi nhấp vào nút Gửi để nhận kết quả

đầu ra. Khi bạn chưa chọn gì

Nhận tất cả giá trị hộp kiểm được đánh dấu bằng phương thức querySelectorAll[]

Có một phương pháp khác để lấy tất cả các giá trị đã chọn từ các hộp kiểm do người dùng đánh dấu. Bây giờ bạn sẽ thấy cách lấy giá trị của tất cả các hộp kiểm bằng phương thức querySelectorAll[] do người dùng đánh dấu. Thao tác này sẽ tìm nạp các giá trị hộp kiểm từ biểu mẫu HTML và hiển thị kết quả

Nhận tất cả giá trị hộp kiểm

Bây giờ, bạn sẽ thấy cách lấy tất cả các giá trị hộp kiểm do người dùng đánh dấu. Xem ví dụ bên dưới

sao chép mã

đầu ra

Tại đây, bạn có thể thấy rằng tất cả giá trị hộp kiểm được đánh dấu đã được trả lại

Các mã JavaScript khác nhau để nhận giá trị hộp kiểm được đánh dấu

Mã JavaScript để nhận tất cả các giá trị hộp kiểm đã chọn

Bạn cũng có thể sử dụng mã dưới đây để nhận tất cả các giá trị hộp kiểm đã chọn

Vì vậy, các phần tử hộp kiểm cho phép đa lựa chọn. Điều này có nghĩa là người dùng có thể chọn một hoặc nhiều tùy chọn theo lựa chọn của họ được xác định trong biểu mẫu HTML. Thậm chí bạn có thể chọn tất cả các hộp kiểm. Trong ví dụ trên, bạn đã thấy rằng

Làm cách nào để nhận giá trị từ hộp kiểm trong HTML?

Làm cách nào để lưu giá trị của hộp kiểm đã chọn vào cơ sở dữ liệu?

Làm cách nào để lưu giá trị hộp kiểm trong mảng?

Chúng ta có thể cung cấp giá trị cho hộp kiểm không?