Home / Web Engineering / jQuery / How to check and uncheck a checkbox in jQuery

How to check and uncheck a checkbox in jQuery

Print Friendly, PDF & Email

Làm với jQuery, nhiều bạn lập trình Front End chắc sẽ nắm rõ cách thức để viết hàm để bắt sự kiện check và uncheck một ô checkbox như thế nào. Tôi cược là các bạn có thể viết code trong vòng một nốt nhạc để xử lý những sự kiện này mà không gặp quá nhiều khó khăn. Vì thế, bài này chỉ làm một mục đích gom lại một số điểm cần lưu ý dành cho ai đó muốn tham khảo cách thức tương tác với ô checkbox qua việc sử dụng các selector để cập nhật trạng thái của đối tượng.

Để dễ theo dõi, tôi đưa ra một ví dụ đơn giản như sau:






Chọn checkbox để làm việc

Để biết được checkbox nào đang được tương tác, bạn cần biết cách chỉ ra nó. Có hàng tá cách thức chọn một đối tượng (element) trên trang một trang web. Muốn biết thêm về cách chọn đối tượng (selectors), bạn có thể ghé thăm trang chính thức của jQuery: https://api.jquery.com/category/selectors/ hoặc https://www.w3schools.com/jquery/jquery_ref_selectors.asp

Đây là cách mà tôi chọn các checkbox trong ví dụ nêu trên

Cập nhật giá trị

Như chúng ta biết, checkbox là một trong những đối tượng HTML phổ biến dùng để biểu diễn những khái niệm có hai trạng thái. Đó là chọn/không chọn hay cụ thể hơn true/false. Ngầm đị, khi tick/check vào ô checkbox, giá trị của nó sẽ true và ngược lại. Vì thế để cập nhật giá trị của nó bạn có thể sử dụng thuộc tính prop hay attr để thay đổi giá trị của ô.

Quay lại ví dụ trên, tôi dùng prop để cập nhật giá trị cho thuộc tính checked thành true.

Trên thực tế, chúng ta muốn rằng: khi tick vào checkbox, nó sẽ tự động đảo ngược trạng thái. Tức là: nếu ô đã checked thì chuyển thành unchecked và ngược lại. Để làm được như thế, bạn có thể tham khảo đoạn code sau:

Source code của ví dụ

Xem source code của ví dụ minh họa tại https://jsfiddle.net/nvntung/htzojcgs/44/

checkedandunchecked

comments

About Nguyen Vu Ngoc Tung

I love making new professional acquaintances. Don’t hesitate to contact me via nguyenvungoctung@gmail.com if you want to talk about information technology, education, and research on complex networks analysis (i.e., metabolic networks analysis), data analysis, and applications of graph theory.

Specialties: researching and proposing innovative business approaches to organizations, evaluating and consulting about usability engineering, training and employee development, web technologies, software architecture.