Những cách lấy giá trị checkbox bằng JavaScript đơn giản nhất

Làm sao để lấy giá trị checkbox bằng JavaScript? Nhiều bạn khi bắt đầu học lập trình web rất hay phân vân câu hỏi này. Đây là một trong những tác vụ quan trọng giúp người dùng tương tác với website. Hãy cùng tìm Got It hiểu cách lấy giá trị checkbox khi sử dụng JavaScript qua bài viết hôm nay nhé!

1. Checkbox là gì?

Checkbox là một khung box nơi bạn có thể chọn hoặc không chọn các giá trị trong bảng. Checkbox là cách hữu hiệu giúp lập trình viên thu thập được thông tin từ người dùng. Chẳng hạn như bạn có thể đặt ra một câu hỏi. Sau đó tạo 3 checkbox có lựa chọn “Lựa chọn 1”, “Lựa chọn 2” và “Lựa chọn 3”. Bằng cách này, người dùng có thể chọn thông tin và tương tác với website.

Checkbox là gì? Cách lấy giá trị checkbox đơn giản

Nếu một checkbox được chọn thì khi dùng JavaScript để lấy giá trị checkbox , nó sẽ tự động trả về giá trị true. Còn nếu không được chọn thì nó sẽ trả về giá trị false. Bạn cũng có thể thay đổi giá trị trả về tùy theo yêu cầu của mỗi dự án. Checkbox khác với radio button và drop-down list ở chỗ bạn có thể chọn nhiều ô cùng một lúc, cho phép đa dạng hoá các lựa chọn cho người dùng.

2. Cách tạo checkbox đơn giản

Để tạo một checkbox, dùng tab HTML <input> và type=”checkbox” ở trong như dưới đây:

<input type=”checkbox” class=”class_name_của_checkbox” id=”id_của_checkbox” value=”giá_trị_trả_về_của_checkbox” name=”tên_của_checkbox”>Yes.

Trong ví dụ trên, id là tên gọi bạn đặt cho checkbox để sau này có thể xác định được checkbox. Class cũng là một cách để định dạng checkbox. Value là giá trị trả về còn name là tên bạn có thể đặt cho checkbox. 

Cách tạo và lấy giá trị checkbox khi sử dụng JavaScript

3. Những cách lấy giá trị checkbox bằng JavaScript

Có rất nhiều cách lấy giá trị checkbox bằng JavaScript, mỗi cách sẽ phù hợp với một trường hợp riêng. Tuy nhiên, điểm chung của các cách này là đều dùng hàm value. Để lấy giá trị checkbox, bạn có thể dùng các cách sau:

Những cách lấy giá trị checkbox sử dụng JavaScript

3.1. Kết hợp getElementById và hàm value

Cách lấy giá trị checkbox bằng JavaScript đầu tiên mà bạn có thể sử dụng là kết hợp getElementById và hàm value. GetElementById sẽ giúp bạn xác định được checkbox nào cần lấy. Còn value sẽ trả về giá trị của checkbox được chọn. Bạn có thể sử dụng đoạn code dưới đây:

document.getElementById(“mã_id_của_checkbox”).value

3.2. Kết hợp getElementsByClassName và hàm value

Cách thứ 2 mà bạn có thể lấy giá trị checkbox bằng JavaScript là thông qua getElementsByClassName và hàm value. Dưới đây là đoạn code mẫu:

document.getElementsByClassName(“tên_class_của_checkbox”).[0].value

Nếu checkbox bạn muốn lấy giá trị nằm ở thứ tự đầu tiên của class này, thì bạn hãy dùng trị số 0. Còn nếu ở các vị trí tiếp theo, bạn hãy tăng lên tương ứng bắt đầu từ 0.

Trên đây là 2 cách lấy giá trị checkbox khi sử dụng JavaScript mà bạn có thể sử dụng. Checkbox là công cụ hữu hiệu để thu thập thông từ người dùng. Biết cách lấy giá trị checkbox bằng JavaScript sẽ giúp bạn lập trình trang web dễ dàng hơn.

Hiện tại, Got It đang tuyển dụng các vị trí Software Engineer sử dụng JavaScript. Bạn có thể tham khảo tại đây hoặc subscribe chúng mình để không bỏ lỡ những tin tức mới nhất nhé!

Đọc thêm về quy trình tuyển dụng tại đây.

https://d1iv5z3ivlqga1.cloudfront.net/wp-content/uploads/2021/04/29235048/1_QAG9RXQyyMAY7i9OYo84FA.png
Got It Vietnam
February 22, 2021
Share this post to:
Tags:
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
trackback
JavaScript là gì? Giải thích chi tiết về JavaScript - Blog | Got It AI
2 years ago

[…] hoàn thành đề xuất để phản hồi lời nhắc. Đó là “tập lệnh” trong JavaScript khiến những điều này được tự động xuất hiện. Nói cách khác, JavaScript […]

Các bài viết liên quan
Eclipse là gì? Hướng dẫn cài đặt Eclipse chi tiết nhất

Eclipse là gì? Hướng dẫn cài đặt Eclipse chi tiết nhất

Eclipse luôn nằm trong top những IDE tốt nhất dành cho lập trình viên. Có thể các bạn quan tâm đến IT đã ít nhất một lần nghe đến cái tên này. Vì vậy, ở bài viết này, Got It sẽ giải đáp những thắc mắc của bạn đọc về Eclipse là gì? Những ưu […]
Những cách lấy giá trị checkbox bằng JavaScript đơn giản nhất

Những cách lấy giá trị checkbox bằng JavaScript đơn giản nhất

Làm sao để lấy giá trị checkbox bằng JavaScript? Nhiều bạn khi bắt đầu học lập trình web rất hay phân vân câu hỏi này. Đây là một trong những tác vụ quan trọng giúp người dùng tương tác với website. Hãy cùng tìm Got It hiểu cách lấy giá trị checkbox khi sử dụng […]
JavaScript là gì? Giải thích chi tiết về JavaScript

JavaScript là gì? Giải thích chi tiết về JavaScript

JavaScript là gì? Đây là câu hỏi phổ biến mà các nhà tuyển dụng thường dùng khi phỏng vấn bạn về Frontend. Nếu bạn đang apply cho vị trí Frontend Engineer, hãy chắc chắn rằng bạn thực sự hiểu rõ về JavaScript. Đây là ngôn ngữ phổ biến nhất các egineer hay dùng để tạo […]
MEAN Stack là gì? Cấu trúc, ưu điểm của MEAN Stack

MEAN Stack là gì? Cấu trúc, ưu điểm của MEAN Stack

MEAN Stack là gì? Với những ai đã và đang làm việc với JavaScript thì chắc hẳn đã từng nghe đến khái niệm này. Bài viết dưới đây sẽ giới thiệu cho bạn về định nghĩa, cấu trúc và ưu điểm của giải pháp phát triển ứng dụng web này.  Mục lục1. MEAN Stack là […]
Các design pattern thông dụng trong JavaScript

Các design pattern thông dụng trong JavaScript

Các design pattern thông dụng không còn là công cụ xa lạ với giới lập trình viên. Nhờ có chúng, developer tạo được các mã code có thể bảo trì, khả dụng và dễ tái sử dụng, đặc biệt đối với các ứng dụng lớn. Bài viết dưới đây sẽ giúp bạn hiểu thêm về […]
Các cách lập trình hướng đối tượng trong JavaScript

Các cách lập trình hướng đối tượng trong JavaScript

Áp dụng lập trình hướng đối tượng trong JavaScript là việc không hề đơn giản, đặc biệt là với những ai mới bắt đầu tiếp cận với kỹ thuật này. Bài viết dưới đây giới thiệu về OOP và gợi ý cho bạn 4 thủ thuật để hiện thực các đặc tính của nó với […]