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

Profile photo of adminTheHalfHeart

TheHalfHeart

Có sở thích viết tuts nên đã từng tham gia viết ở một số diễn đàn, đến năm 2014 mới có điều kiện sáng lập ra freetuts.net. Sinh năm 90 và có 1 vợ 2 con, thích ca hát và lập trình.

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Facebook để được hỗ trợ nhanh nhất.