/Hàm change trong JQuery API
Các hàm built-in18/10/2023

Hàm change trong JQuery API

Hàm change là một trong các hàm hỗ trợ sẵn (built-in fuctions) JQuery API của thư viện jQuery được sử dụng để gán một trình xử lý sự kiện cho sự kiện “change” hoặc kích hoạt sự kiện đó trên một phần tử HTML.

Sự kiện “change” xảy ra trên một phần tử HTML khi giá trị của phần tử đó thay đổi. Sự kiện này thường được áp dụng cho các phần tử đầu vào (input elements) như text box, radio button, checkbox, select box, và textarea.

Cụ thể, khi người dùng thay đổi giá trị trong một trường đầu vào (ví dụ: nhập văn bản mới trong ô input), sự kiện “change” sẽ được kích hoạt. Điều này cho phép bạn xác định và thực hiện các hành động cần thiết khi giá trị của phần tử thay đổi.

1. Cú pháp hàm change

Mục đích

  • Hàm change dùng để gắn một trình xử lý sự kiện để thực thi mỗi khi sự kiện “change” xảy ra trên một phần tử HTML.
  • Hàm change dùng để kích hoạt sự kiện “change” trên một phần tử.

Cú pháp

  • $(selector).change(handler)
  • $(selector).change([eventData], handler)
  • $(selector).change()

Tham số

  • selector: Chọn các phần tử HTML mà bạn muốn gắn trình xử lý sự kiện hoặc kích hoạt sự kiện “change” trên.
  • handler: Một hàm sẽ được thực thi mỗi khi sự kiện “change” xảy ra. Đối số eventObject là một đối tượng chứa thông tin về sự kiện.
  • eventData (tùy chọn): Dữ liệu sự kiện có thể được chuyển đến trình xử lý sự kiện.

Kết quả trả về

  • Không trả về giá trị cụ thể.

Phiên bản hỗ trợ

  • Phiên bản 1.0 của jQuery đã hỗ trợ cú pháp change(handler) và change().
  • Phiên bản 1.4.3 của jQuery đã hỗ trợ cú pháp change([eventData], handler).
Hàm change trong JQuery API

2. Một số ví dụ hàm change

2.1. Sử dụng không tham số trên với input text tag

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ví dụ Input Text</title>
</head>
<body>
    <label for="inputText">Nhập tên của bạn:</label>
    <input type="text" id="inputText" placeholder="Nhập tên của bạn">
	
	<label for="selectBox">Chọn ngôn ngữ ưa thích:</label>
    <select id="selectBox">
        <option value="en">English</option>
        <option value="fr">Français</option>
        <option value="es">Español</option>
    </select>
    <p id="output"></p>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#inputText').change(function() {
                $('#output').text('Xin chào, ' + $(this).val() + '!');
            });
			
			 $('#selectBox').change(function() {
                var selectedLanguage = $(this).val();
                $('#output').text('Ngôn ngữ đã chọn: ' + selectedLanguage);
            });
        });
    </script>
</body>
</html>

Giải thích:

  • Khi bạn nhập tên vào ô input, nó sẽ hiển thị lời chào “Xin chào, [tên]!” dưới ô input.

2.2. Sử dụng hàm change không tham số để kích hoạt sự kiện

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ví dụ Change Không Tham Số</title>
</head>
<body>
    <input type="text" id="myInput" placeholder="Nhập giá trị">
    <button id="myButton">Kích hoạt sự kiện change</button>
    <p id="output"></p>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#myInput').change(function() {
                $('#output').text('Sự kiện change đã được kích hoạt trên input.');
            });

            $('#myButton').click(function() {
                $('#myInput').change(); // Kích hoạt sự kiện change không có tham số
            });
        });
    </script>
</body>
</html>

Giải thích:

  • Khi bạn nhập giá trị vào ô input và sau đó bấm vào nút “Kích hoạt sự kiện change”, sự kiện “change” sẽ được kích hoạt trên ô input và thông báo “Sự kiện change đã được kích hoạt trên input.” sẽ được hiển thị. Trong đoạn mã, chúng tôi đã gọi .change() mà không có đối số để kích hoạt sự kiện “change” trên ô input.

2.3 Sử dụng các tham số eventData và handler trên checkbox

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ví dụ Checkbox</title>
</head>
<body>
    <label for="checkbox">Chọn thông báo email:</label>
    <input type="checkbox" id="checkbox">
    <p id="output"></p>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#checkbox').change({ message: 'Bạn đã đồng ý nhận thông báo email.', email: 'hoctoantap@gmail.com' }, function(event) {
                var message = event.data.message;
                if ($(this).is(':checked')) {
                    $('#output').text(message + ' với email := ' + event.data.email );
                } else {
                    $('#output').text('Bạn đã hủy chọn thông báo email.');
                }
            });
        });
    </script>
</body>
</html>

Giải thích:

  • Khi bạn chọn hoặc bỏ chọn checkbox, nó sẽ hiển thị thông báo tùy thuộc vào trạng thái của checkbox: “Bạn đã đồng ý nhận thông báo email.” hoặc “Bạn đã hủy chọn thông báo email.”

2.4. Dùng hàm on thay thế

Hàm change trong jQuery đã bị coi là lỗi thời (deprecated) và khuyến nghị sử dụng on để xử lý sự kiện thay thế. Hàm on cho phép bạn gắn một hoặc nhiều trình xử lý sự kiện cho một phần tử hoặc nhiều phần tử.

Dưới đây là một ví dụ sử dụng on để theo dõi sự thay đổi trong một select box và cập nhật nội dung của một select box khác dựa trên lựa chọn trong select box đầu tiên.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ví dụ sử dụng on()</title>
</head>
<body>
    <label for="states">Chọn bang:</label>
    <select id="states">
        <option value="california">California</option>
        <option value="texas">Texas</option>
        <option value="newyork">New York</option>
    </select>

    <label for="cities">Chọn thành phố:</label>
    <select id="cities">
        <option value="default">Chọn bang trước</option>
    </select>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#states').on('change', function() {
                var state = $(this).val();
                var cities = [];

                // Thêm các thành phố tương ứng với bang được chọn
                if (state === 'california') {
                    cities = ['Los Angeles', 'San Francisco', 'San Diego'];
                } else if (state === 'texas') {
                    cities = ['Houston', 'Austin', 'Dallas'];
                } else if (state === 'newyork') {
                    cities = ['New York City', 'Albany', 'Buffalo'];
                }

                // Cập nhật select box thành phố
                var citySelect = $('#cities');
                citySelect.empty();
                $.each(cities, function(index, city) {
                    citySelect.append('<option value="' + city + '">' + city + '</option>');
                });
            });
        });
    </script>
</body>
</html>

Giải thích:

  • Khi bạn chọn một bang từ select box đầu tiên, select box thứ hai sẽ được cập nhật tự động với các thành phố tương ứng với bang được chọn. Chẳng hạn, khi bạn chọn “California”, select box thành phố sẽ cập nhật với danh sách các thành phố ở California.

2.5. Sử dụng trigger(“change”) để kích hoạt thay cho hàm không tham số

Hiện nay do hàm change đã lỗi thời, do đó hàm trigger("change") trong jQuery thường được sử dụng để kích hoạt sự kiện “change” trên một phần tử thay cho hàm change không tham số ở phía trên.

Điều này đặc biệt hữu ích khi bạn muốn gọi sự kiện “change” một cách tự động hoặc từ một hàm khác. Dưới đây là một ví dụ minh họa:

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ví dụ trigger("change")</title>
</head>
<body>
    <label for="myInput">Nhập giá trị:</label>
    <input type="text" id="myInput" placeholder="Nhập giá trị">
    <button id="myButton">Kích hoạt sự kiện change</button>
    <p id="output"></p>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#myButton').click(function() {
                $('#myInput').val('Giá trị mới');
                $('#myInput').trigger('change'); // Kích hoạt sự kiện change
            });

            $('#myInput').change(function() {
                $('#output').text('Sự kiện change đã được kích hoạt trên input.');
            });
        });
    </script>
</body>
</html>

Giải thích:

  • Khi bạn bấm vào nút “Kích hoạt sự kiện change”, sự kiện “change” sẽ được kích hoạt trên ô input và thông báo “Sự kiện change đã được kích hoạt trên input.” sẽ được hiển thị. Trong đoạn mã, chúng tôi đã sử dụng trigger("change") để kích hoạt sự kiện “change” khi bấm nút.

Related posts