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.

Kiểm tra trạng thái của checkbox input với jQuery và JavaScript Thuần

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);
Lưu ý: Bạn vẫn có thể sử dụng `attr()` ở phiên bản jQuery 1.6+ để kiểm tra trạng thái của ô checkbox. Tuy nhiên để đảm bảo code JavaScript chạy đúng trên trình duyệt khác nhau thì bạn nên sử dụng phương thức `prop()` khi làm việc với các **property** của phần tử DOM

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.

Bài Viết Liên Quan