[Bài 1] Check / Uncheck tất cả checkbox trong jquery

Bạn đang ở bài 1 trong 7 bài của serie Bài tập jquery.

Sau khi chúng ta đã hoàn thành serie học jquery cơ bản thì chúng ta sẽ bắt đầu một cuộc hành trình mới với việc quay tay, vận não nhiều hơn chút nữa ở serie bài tập jquery này. Những bài tập trong serie bài tập jquery được thiết kế đơn giản nhưng mình sẽ cố đưa vào càng nhiều ví dụ thực tế để chúng không chỉ là bài tập mà còn là các vấn đề thực tế mà chúng ta sẽ áp dụng khi gặp phải.

Yêu cầu:

Ở bài tập đầu tiên trong serie bài tập jquery sẽ là một tính năng mà chúng ta thường thấy ở nhiều trang web, đặc biệt là ở những phần quản lý, đó là tính năng chọn hoặc bỏ chọn tất cả checkbox.

checkbox

Phân tích:

Nếu bạn là một newbie trong jquery thì chúng ta bắt đầu như thế nào đây? Chúng ta sẽ phát họa chức năng một chút. Đầu tiên là sẽ có một phần tử checkbox đóng vai trò bị click (chúng ta sẽ đặt một id cho nó để nhận ra được nó là duy nhất), và một danh sách các checkbox còn lại (bạn có thể đặt tên class cho chúng hoặc dùng cách nào khác để có thể chọn được tất cả chúng), và chúng ta sẽ dùng sự kiện trong jquery để xác định khi nào thì checkbox được click vào, và cuối cùng là tìm phương thức nào đó để thay đổi thuộc tính của checkbox sau mỗi lần click.

Code:

<script>
$(document).ready(function(){
  $("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
  });
});
</script>

Demo trên codepen.

Giải thích:

Change() : xác định khi checkbox có thay đổi trạng thái được check hoặc uncheck

Prop(): sẽ gán giá trị cho checkbox.

Kết luận:

Rất đơn giản nhưng không phải đang giỡn nhé các bạn, vì tính năng rất hay thường gặp trong thực tế, với tính năng này chúng ta có thể dễ dàng áp dụng vào các danh sách liệt kê như sản phẩm, user, danh mục,…

Xem tiếp bài trong serie Bài tập jquery

Bài kế tiếp: [Bài 2] Tạo tabs đơn giản bằng jquery
[Bài 1] Check / Uncheck tất cả checkbox trong jquery
5 (100%) 2 votes

Bình luận

1 Bình luận on "[Bài 1] Check / Uncheck tất cả checkbox trong jquery"

Thông báo
avatar
Sắp xếp:   Mới nhất | Cũ nhất | Bình chọn nhiều
trackback

[…] bài trước chúng ta đã làm quen với một tính năng đơn giản là check, uncheck tất cả […]

wpDiscuz