Tạo check all và uncheck all trong Javascript

DEMO

Thông thường khi xây dựng chức năng quản lý danh sách dữ liệu thì mỗi record ta sẽ bổ sung một nút checkbox để khi người dùng muốn xóa record nào thì chỉ cần checked vào record đó. Để làm được chức năng này thì bạn phải kết hợp cả Javascript và ngôn ngữ Server như PHP, JSP, ASP ... Tuy nhiên trong bài tập này mình chỉ trình bày cách sử dụng Javascript để thiết lập check all và uncheck all thôi nhé.

Kết quả như sau:

Như ta biết để thiết lập checked cho một checkbox thì ta sẽ dựa vào giá trụ TRUE/FALSE của thuộc tính checked. Nhưng vấn đề là ta phải thiết lập cho nhiều checkbox nên cần phải sử dụng DOM để lấy danh sách các checkbox, sau đó lặp qua từng checkbox để thay đổi trạng thái checked.

Trước tiên mình tạo giao diện như sau:

Giao diện RUN
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Javascript Example</title>
    </head>
    <body>
        <h2>Tạo check all và uncheck all trong Javascript</h2>
        <table border='1' cellspacing='0' cellpadding='10'>
            <tr style="font-weight: bold">
                <td><input type='checkbox' name='name[]' id='check_all' value='' /></td>
                <td>Nguyễn Văn Cường</td>
            </tr>
            <tr style="font-weight: bold">
                <td><input type='checkbox' name='name[]' id='check_all' value='' /></td>
                <td>Vũ Thị Thu Tình</td>
            </tr>
            <tr style="font-weight: bold">
                <td><input type='checkbox' name='name[]' id='check_all' value='' /></td>
                <td>Nguyễn Văn Thiên</td>
            </tr>
            <tr style="font-weight: bold">
                <td><input type='checkbox' name='name[]' id='check_all' value='' /></td>
                <td>Nguyễn Thị Thanh Thu</td>
            </tr>
        </table>
        <br/>
        <br/>
        <input type="button" id="btn1" value="Chọn hết"/>
        <input type="button" id="btn2" value="Bỏ chọn"/>
 
    </body>
</html

Bây giờ ta sẽ bổ sung một chút Javascript, nhớ là đặt nó phía dưới các checkbox nhé.

Toàn bộ chương trình RUN
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Javascript Example</title>
    </head>
    <body>
        <h2>Tạo check all và uncheck all trong Javascript</h2>
        <table border='1' cellspacing='0' cellpadding='10'>
            <tr style="font-weight: bold">
                <td><input type='checkbox' name='name[]' id='check_all' value='' /></td>
                <td>Nguyễn Văn Cường</td>
            </tr>
            <tr style="font-weight: bold">
                <td><input type='checkbox' name='name[]' id='check_all' value='' /></td>
                <td>Vũ Thị Thu Tình</td>
            </tr>
            <tr style="font-weight: bold">
                <td><input type='checkbox' name='name[]' id='check_all' value='' /></td>
                <td>Nguyễn Văn Thiên</td>
            </tr>
            <tr style="font-weight: bold">
                <td><input type='checkbox' name='name[]' id='check_all' value='' /></td>
                <td>Nguyễn Thị Thanh Thu</td>
            </tr>
        </table>
        <br/>
        <br/>
        <input type="button" id="btn1" value="Chọn hết"/>
        <input type="button" id="btn2" value="Bỏ chọn"/>
        
        
        <script language="javascript">

            // Chức năng chọn hết
            document.getElementById("btn1").onclick = function () 
            {
                // Lấy danh sách checkbox
                var checkboxes = document.getElementsByName('name[]');

                // Lặp và thiết lập checked
                for (var i = 0; i < checkboxes.length; i++){
                    checkboxes[i].checked = true;
                }
            };

            // Chức năng bỏ chọn hết
            document.getElementById("btn2").onclick = function () 
            {
                // Lấy danh sách checkbox
                var checkboxes = document.getElementsByName('name[]');

                // Lặp và thiết lập Uncheck
                for (var i = 0; i < checkboxes.length; i++){
                    checkboxes[i].checked = false;
                }
            };

        </script>
    </body>
</html>

Nguồn: freetuts.net

Hãy đặt câu hỏi trên Group Facebook để được mọi người hỗ trợ nhanh hơn. Liên hệ Fanpage nếu có thắc mắc về nội dung như: link chết, bản quyền, ma nguồn bị lỗi ...

[Review] - Khóa học Javascript dành cho người mới bắt đầu tại Fedu

Nếu bạn là người mới bắt đầu tìm hiểu về Javascript thì đây là khoá học rất đáng để bạn xem đấy, giá chỉ 349k với hơn 15h học online nên dù bận cỡ nào bạn cũng có thể học được. Ngoài ra còn có cơ chế hoàn tiền nếu bạn không hài lòng.