Tạo giao diện phân quyền website – Check All với Js – Jquery

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.

Mọi người thường xem

Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments

Bạn muốn kiếm tiền từ kỹ năng lập trình web?

Lộ trình 10 bước có nhóm kín kèm cặp và trên 2.500 người học và đã đi làm với thu nhập 8-30tr/tháng

Ebook Bí quyết học lập trình web đi làm - Phan Văn Cương - Unitop.vn
0
Bạn đang nghĩ gì? Hãy để lại bình luận tại đâyx
()
x