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é!

Mục lục

• 1. Checkbox là gì?
• 2. Cách tạo checkbox đơn giản
• 3. Những cách lấy giá trị checkbox bằng JavaScript
  • 3.1. Kết hợp getElementById và hàm value
  • 3.2. Kết hợp getElementsByClassName và hàm value

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.

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.

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:

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é!