How to check and uncheck a checkbox in jQuery

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:

<div id="allFruits" class="checkbox">
  <label><input type="checkbox" value="apricot" name="fruit">Apricot</label><br/>
  <label><input type="checkbox" value="banana" name="fruit">Banana</label><br/>
  <label><input type="checkbox" value="grapes" name="fruit">Grapes</label><br/>
  <label><input type="checkbox" value="orange" name="fruit">Orange</label><br/>
  <label><input type="checkbox" value="plum" name="fruit">Plum</label><br/>
  <input type="button" value="Select All" name="selection">
</div>

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

var status = $('input:checkbox[name=fruit]').is(':checked');
console.log(status);

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 ô.

$('input:checkbox[name=fruit]').prop('checked', true);

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:

var status = $('input:checkbox[name=fruit]').is(':checked');
$('input:checkbox[name=fruit]').prop('checked', !status);

Source code của ví dụ

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