Khi làm phân quyền rất nhiều bạn đang gặp khó khăn trong việc tạo giao diện mà ở đó có thể nhấp vào module để chọn tất cả các quyền ở bên trọng. Yên tâm đây là bài viết dành cho bạn.
Hướng dẫn tạo giao diện CheckAll phân quyền website
Bên dưới là đoạn code để thực hiện chức năng checkall module trong phần quyền website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tạo giao diện phân quyền Check All</title>
</head>
<body>
<ul>
<li>
Module 1
<ul>
<li>
<input type="checkbox" class="check-all" />
<label>Check All</label>
<ul>
<li>
<input type="checkbox" class="permission" />
<label>Permission 1</label>
</li>
<li>
<input type="checkbox" class="permission" />
<label>Permission 2</label>
</li>
</ul>
</li>
</ul>
</li>
<li>
Module 2
<ul>
<li>
<input type="checkbox" class="check-all" />
<label>Check All</label>
<ul>
<li>
<input type="checkbox" class="permission" />
<label>Permission 3</label>
</li>
<li>
<input type="checkbox" class="permission" />
<label>Permission 4</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('.check-all').click(function () {
$(this).closest('li').find('.permission').prop('checked', this.checked)
})
</script>
</body>
</html>
Ở đây hàm click được sử dụng để kích hoạt sự kiện khi người dùng click vòa check-all . Hàm .closest() giúp bạn truy cập dến phần tử cha li và dựa vào ham find() để tìm tất cả các phần tử con có class .permission. Và cuối cùng hàm .prop dùng để bật và tắt trạng thái check của từng checkbox con đã lọc được ở bước trên.
Vậy là chúng ta đã tạo được giao diện checkall cho phân quyền cơ bản. Bạn có thể copy và áp dụng ngay vào dự án của mình.