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. Checkbox là một trong những thành phần quan trọng giúp người dùng tương tác với website. Hãy cùng tìm hiểu cách lấy giá trị checkbox khi sử dụng JavaScript qua bài viết dưới đây.

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.

lấy giá trị checkbox bằng JavaScript
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. 

JavaScript là gì
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:

lấy giá trị checkbox là gì
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.

Nếu bạn quan tâm, hãy xem các vị trí đang tuyển dụng của Got It tại: bit.ly/gotit-hanoi và đọc thêm về quy trình tuyển dụng tại đây.

branding
branding
February 22, 2021
0
Share this post to:
Tags:
0 Comments
Inline Feedbacks
View all comments
Các bài viết liên quan
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. Checkbox là một trong những thành phần quan trọng giúp người dùng tương tác với website. Hãy cùng tìm hiểu cách lấy giá trị checkbox khi sử dụng JavaScript qua […]
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  lĩnh vực lập trình Frontend, hãy chắc chắn rằng bạn thực sự hiểu rõ về JavaScript. Bài viết dưới đây sẽ cho bạn câu trả lời chính xác và cụ thể nhất […]
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 […]
MVC framework là gì? Quy trình hoạt động của mô hình MVC

MVC framework là gì? Quy trình hoạt động của mô hình MVC

MVC framework đóng vai trò quan trọng trong việc thiết kế một chương trình cho máy tính, ứng dụng web hoặc thiết bị di động. Vậy, MVC framework là gì? Quy trình hoạt động của mô hình MVC ra sao? Cùng theo dõi bài viết sau đây của Got It để có câu trả lời […]