Kiểm Tra Trạng Thái Của Checkbox Input với jQuery và JavaScript Thuần

Kiểm tra xem một ô checkbox đang được tích chọn hay không là một công việc khá phổ biến khi chúng ta làm việc với phần frontend của ứng dụng web. Trong bài viết này chúng ta sẽ tìm hiểu cách thực hiện công việc này thông qua một số phương pháp khác nhau.

JavaScript Thuần

Chúng ta hoàn toàn có thể sử dụng JavaScript thuần để kiểm tra trạng thái của một input checkbox. Mặc dù vậy vẫn có không ít web developer chưa đều biết điều này!

Mã HTML:

<input id="gender_male_checkbox" type="checkbox" name="gender" value="male">
<input id="fegender_male_checkbox" type="checkbox" name="gender" value="female">

Mã JavaScript:

var genderMaleCheckbox = document.getElementById('gender_male_checkbox');

var isGenderMale = genderMaleCheckbox.checked;

Trong JavaScript thuộc tính checked của các DOM Element tương ứng với input checkbox được sử dụng để lấy ra giá trị trạng thái của checkbox. Thuộc tính này có kiểu dữ liệu là boolean, true ứng với trạng thái đang được tích và false ứng với đang không được tích. Ngoài ra bạn cũng có thể gán giá trị cho thuộc tính này để cập nhật trạng thái của checkbox ví dụ:

genderMaleCheckbox.checked = true;

Sử Dụng jQuery

Tuỳ thuộc vào phiên bản jQuery sử dụng sẽ có những cách khác nhau để kiểm tra trạng thái của ô checkbox input.

Sử Dụng Phương Thức prop() trong jQuery 1.6+

Với jQuery phiên bản jQuery từ 1.6 trở về sau chúng ta có thể sử dụng phương thức prop():

var isGenderMale = $('#gender_male_checkbox').prop('checked');

Phương thức prop() của jQuery cũng cho phép chúng ta có thể gán giá trị cho thuộc tính checked của phần tử DOM:

var isGenderMale = $('#gender_male_checkbox').prop('checked', true);

Sử Dụng Phương Thức attr() trong jQuery < 1.5

Với jQuery phiên bản 1.5 trở về trước chúng ta sử dụng phương thức attr() của jQuery:

var isGenderMale = $('#gender_male_checkbox').attr('checked');

Tương tự như prop() trong jQuery 1.6+ thì chúng ta cũng có thể gán giá trị cho thuộc tính checked của phần tử DOM:

var isGenderMale = $('#gender_male_checkbox').attr('checked', true);

Sử Dụng Phưong Thức is() trong jQuery

Ngoài ra còn một cách thức khác nữa đó là sử dụng phương thức is():

var isGenderMale = $('#gender_male_checkbox').is(":checked");

Khi sử dụng .is() thì kết quả trả về sẽ thuộc kiểu dữ liệu boolean. Chúng ta có thể dùng cách trên trong tất cả các phiên bản của jQuery.