/checkbox Selector trong thư viện JQuery
Các hàm built-in01/10/2023

checkbox Selector trong thư viện JQuery

Lựa chọn checkbox Selector hay “:checkbox” là một trong các loại Selectors cơ bản được cung cấp sẵn trong thư viện jQuery được thiết kế để chọn tất cả các phần tử có loại “checkbox” trên trang web.

Trong đó “Checkbox” là một loại phần tử HTML được sử dụng trong trang web để cho phép người dùng chọn hoặc bỏ chọn một tùy chọn cụ thể. Nó thường được sử dụng để yêu cầu người dùng xác nhận hoặc chọn nhiều tùy chọn trong một danh sách.

Checkbox thường được hiển thị dưới dạng hộp chọn có thể được tích (được chọn) hoặc không tích (không được chọn). Khi một checkbox được tích, nó thường được hiển thị với một dấu tích hoặc một biểu tượng thích hợp, tùy thuộc vào giao diện người dùng.

1. Cú pháp của checkbox Selector

Cú pháp:

$( ":checkbox" )

Hoặc

jQuery( ":checkbox" )

Kết quả trả về:

  • checkbox Selector sẽ chọn tất cả các phần tử có loại “checkbox” trên trang web và trả về một danh sách các phần tử được chọn.

Phiên bản hỗ trợ:

  • Tính năng này được giới thiệu từ phiên bản 1.0 của jQuery.

Giải thích:

  • “:checkbox” là một pseudo-class selector trong jQuery, chọn tất cả các phần tử có loại “checkbox”.
  • Cú pháp “$( “:checkbox” )” giống như “$( “[type=checkbox]” )”.
  • Lưu ý rằng khi sử dụng pseudo-class selectors, như “:checkbox”, được khuyến nghị để kèm theo một tên thẻ hoặc một selector khác. Nếu không, selector chung (““) sẽ được áp dụng ngầm. Ví dụ, “$(‘:checkbox’)” tương đương với “$( “:checkbox” )”, nhưng thay vì điều này, nên sử dụng “$( “input:checkbox” )”.
  • “:checkbox” là một phần mở rộng của jQuery, không phải là một phần của CSS specification. Do đó, các truy vấn sử dụng “:checkbox” không thể tận dụng hiệu suất tăng cường được cung cấp bởi phương thức native DOM querySelectorAll(). Để đạt hiệu suất tốt hơn trên các trình duyệt hiện đại, nên sử dụng “[type=’checkbox’]” thay vì “:checkbox”.
checkbox Selector trong thư viện JQuery

2. Một số ví dụ

2.1. Sử dụng checkbox Selector để tìm kiếm “checkbox” trên trang web

Dưới đây là một ví dụ về cách sử dụng checkbox selector (:checkbox) trong jQuery để tìm kiếm và thao tác với các phần tử “checkbox” trên trang web:

HTML code:

<!DOCTYPE html>
<html>
<head>
  <title>Checkbox Selector Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<h3>Chọn một hoặc nhiều tùy chọn:</h3>
<input type="checkbox" id="option1" name="option" value="Option 1">
<label for="option1">Tùy chọn 1</label><br>

<input type="checkbox" id="option2" name="option" value="Option 2">
<label for="option2">Tùy chọn 2</label><br>

<input type="checkbox" id="option3" name="option" value="Option 3">
<label for="option3">Tùy chọn 3</label><br>

<button id="checkButton">Kiểm tra chọn</button>

<script>
  $(document).ready(function() {
    // Xử lý sự kiện khi nút được nhấn
    $('#checkButton').click(function() {
      // Sử dụng checkbox selector để chọn tất cả các checkbox
      var checkboxes = $(":checkbox");

      // Lặp qua từng checkbox và kiểm tra xem nó có được chọn hay không
      checkboxes.each(function() {
        if ($(this).is(':checked')) {
          alert($(this).val() + ' đã được chọn.');
        } else {
          alert($(this).val() + ' không được chọn.');
        }
      });
    });
  });
</script>

</body>
</html>

Trong ví dụ này, chúng ta tạo ba checkbox và một nút “Kiểm tra chọn”. Khi nút “Kiểm tra chọn” được nhấn, chúng ta sử dụng checkbox selector ":checkbox" để chọn tất cả các checkbox trên trang web.

Sau đó, chúng ta kiểm tra xem mỗi checkbox có được chọn hay không và hiển thị thông báo tương ứng.

2.2. checkbox Selector và Attribute Equals Selector

Ví dụ dưới đây cho thấy rằng cú pháp $( ":checkbox" ) giống với việc sử dụng Attribute Equals Selector là $("[type=checkbox]") giống nhau trong tìm kiếm các các checkbox trên trang web trong thư viện jQuery:

HTML code:

<!DOCTYPE html>
<html>
<head>
  <title>Checkbox Selector Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<h3>Chọn một hoặc nhiều tùy chọn:</h3>
<input type="checkbox" id="option1" name="option" value="Option 1">
<label for="option1">Tùy chọn 1</label><br>

<input type="checkbox" id="option2" name="option" value="Option 2">
<label for="option2">Tùy chọn 2</label><br>

<input type="checkbox" id="option3" name="option" value="Option 3">
<label for="option3">Tùy chọn 3</label><br>

<button id="checkButton">Kiểm tra chọn</button>

<script>
  $(document).ready(function() {
    // Sử dụng cú pháp $( ":checkbox" ) để chọn tất cả các checkbox
    var checkboxesByColon = $( ":checkbox" );

    // Sử dụng cú pháp $( "[type=checkbox]" ) để chọn tất cả các checkbox
    var checkboxesByAttribute = $( "[type=checkbox]" );

    // Kiểm tra xem cả hai kết quả có giống nhau hay không
    alert((checkboxesByColon.length == checkboxesByAttribute.length) ? "Cùng tìm được: " + checkboxesByColon.length +" checkbox" : "2 cách tìm không giống nhau");

    // In ra các checkbox được chọn sử dụng cả hai cú pháp
    alert("Checkbox được chọn (theo cú pháp $( \":checkbox\" )): " + checkboxesByColon.length);
    alert("Checkbox được chọn (theo cú pháp $( \"[type=checkbox]\" )): " + checkboxesByColon.length);
  });
</script>

</body>
</html>

Trong ví dụ này, chúng ta tạo ba checkbox và sử dụng cả hai cú pháp $( ":checkbox" ) và $( "[type=checkbox]" ) để chọn tất cả các checkbox.

Sau đó, chúng ta so sánh hai kết quả để chứng minh rằng cả hai cú pháp đều cho ra kết quả giống nhau. Kết quả sẽ được hiển thị trong console.

2.3. Sử dụng Attribute Equals Selector $(“[type=checkbox]”) tốt hơn

Việc sử dụng checkbox Selector (:checkbox) là một phần mở rộng của jQuery và không phải là một phần của CSS specification, cũng như truy vấn sử dụng :checkbox không tận dụng được hiệu suất của phương thức native DOM querySelectorAll().

Hãy xem ví dụ dưới đây:

<!DOCTYPE html>
<html>
<head>
  <title>Checkbox Selector Performance Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<h3>Performance Comparison</h3>

<button id="jquerySelectorButton">jQuery Selector Performance</button>
<button id="nativeSelectorButton">Native Selector Performance</button>

<script>
  $(document).ready(function() {
    // Tạo 1000 checkbox trong DOM
    for (var i = 0; i < 1000; i++) {
      $("body").append("<input type='checkbox' id='checkbox" + i + "'>");
    }

    // Sử dụng jQuery Selector ":checkbox" và đo thời gian để chọn tất cả checkbox
    $('#jquerySelectorButton').click(function() {
      var startTime = performance.now();
      var checkboxesByJQuery = $(":checkbox");
      var endTime = performance.now();
      alert("Thời gian chọn tất cả checkbox bằng jQuery: " + (endTime - startTime) + " milliseconds");
    });

    // Sử dụng native DOM Selector "[type=checkbox]" và đo thời gian để chọn tất cả checkbox
    $('#nativeSelectorButton').click(function() {
      var startTime = performance.now();
      var checkboxesByNativeDOM = document.querySelectorAll("[type=checkbox]");
      var endTime = performance.now();
      alert("Thời gian chọn tất cả checkbox bằng native DOM: " + (endTime - startTime) + " milliseconds");
    });
  });
</script>

</body>
</html>

Trong ví dụ này, chúng ta tạo 1000 checkbox trong DOM và sử dụng hai cú pháp để chọn tất cả các checkbox: :checkbox trong jQuery và [type=checkbox] trong native DOM. Chúng ta sẽ đo thời gian mà mỗi phương thức mất để chọn tất cả checkbox.

Khi bạn chạy ví dụ này và nhấp vào các nút “jQuery Selector Performance” và “Native Selector Performance”, bạn sẽ thấy thời gian mà mỗi phương thức mất để chọn tất cả checkbox. Thời gian chọn bằng native DOM thường nhanh hơn do tận dụng hiệu suất của querySelectorAll().

Related posts