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.
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>
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,…
Từ khóa tìm kiếm:
- check all trong jquery