/ / Javascript & Jquery / Comment (0)

Check – Uncheck all input checkbox with Jquery

Chắc hẳn nhiều bạn đã từng sử dụng hoặc thấy chức năng lựa chọn nhiều input checkbox (Check – Uncheck all input checkbox),nhất là chức năng lựa chọn và xóa nhiều dữ liệu trong trang quản trị.Trong bài hướng dẫn này mình sẽ hướng dẫn các bạn newbie có thể làm được chức năng này sử dụng jQuery.Nội dung của bài này như sau:

  1. Lựa chọn hoặc bỏ lựa chọn các input checkbox
  2. Lấy các giá trị trong checkbox được lựa chọn
  3. Tìm hiểu thêm 1 số hàm mới trong jQuery
Xem demo

Xem demo

Check – Uncheck all input checkbox with Jquery

Lựa chọn và bỏ lựa chọn các checkbox

– Trước tiên mình sẽ tạo ra các checkbox để thực hiện test nhé:

        <div id="checkall">
            <ul>
                <?php for($i = 1;$i<=10;$i++):?>
                <li>
                    <input type="checkbox" name="ids[]" class="checkbox" value="<?php echo $id; ?>" /> Sản phẩm <?php echo $i;?>
                </li>
                <?php endfor;?>
            </ul> 
            <input type="checkbox" id="select_checkbox" name="select_checkbox" /> check/uncheck all
            <button id="delete_all">Xóa hết</button>
        </div>

– Và chúng ta sẽ được các checkbox như sau:

Check - Uncheck all input checkbox with Jquery

Check – Uncheck all input checkbox with Jquery

– Tiếp theo chúng ta sẽ viết mã jQuery để thực hiện lựa chọn hoặc bỏ lựa chọn các checkbox:

        <script type="text/javascript">
        $('document').ready(function(){
            //lua chọn hoac bo lua chon cac checkbox class='checkbox'
            $("#select_checkbox").click(function(){
                 if ($(this).is(':checked')) {
                        $(".checkbox").attr("checked", true);
                 } else {
                        $(".checkbox").attr("checked", false);
                 }
            });
        });
        </script>

– Đoạn script trên sẽ kiểm tra nếu khi click vào checkbox check/uncheck all nếu nó đang được lựa chọn lúc này ta sẽ thiết lập thuộc tính checked cho các checkbox có class = 'checkbox'

Lấy các giá trị checkbox được lựa chọn

– Chúng ta sẽ viết đoạn mã lấy các giá trị của checkbox được lựa chọn như sau:

        <script type="text/javascript">
        $('document').ready(function(){
            //lay cac gia tri cua checkbox duoc lua chon
            $("button#delete_all").click(function(){
                //tao bien luu mang cac gia tri cua checkbox duoc chon
                var ids = new Array();
                $(this).parent('div#checkall').find('[name="ids[]"]:checked').each(function()
                {
                    ids.push($(this).val());
                });
                
                ids = $.unique(ids);
                if(confirm("Bạn chắc chắn muốn xóa"))
                {
                    alert(ids);
                }
            });
        });
        </script>

– Mình giải thích qua 1 chút về đoạn code ở trên:

  1. parent('div#checkall'): tìm tới phần tử cha của nó
  2. find('[name="ids[]"]:checked'): từ phần từ cha parent('div#checkall') tìm tới các thẻ input có name="ids[]" và được lựa chọn
  3. ids.push($(this).val()): thêm giá trị của input được lựa chọn vào mảng ids
  4. confirm(): hàm này có chức năng xác thực lại yêu cầu của bạn,nếu bạn chọn yes thì nó sẽ thực hiện lệnh bên trong,ngược lại sẽ bỏ qua.Hàm này hay được sử dụng trong quá trình xóa dữ liệu và hỏi lại quản trị xem đã chắc chắn muốn thực hiện yêu cầu hay không

Tổng kết

– Qua bài này mình đã đưa ra 1 ví dụ tuy rất đơn giản nhưng lại được sử dụng rất nhiều trong quá trình làm việc,mong rằng bài viết sẽ giúp ích cho các bạn newbie.Tải mã nguồn demo trong bài viết tại đây: http://ouo.io/Ye0JA



30/05/2015
Tags:
Written by nobitacnt

Trong bài viết không tránh khỏi những câu từ chưa chính xác,mong nhận được sự góp ý để website hoàn thiện hơn.Nếu thấy bài viết có ích với bạn hãy like và share để ủng hộ nhé :D.

Bài viết chùng chuyên mục

Gửi bình luận

Giới thiệu

Mình tạo ra blog này với mong muốn chia sẻ và học hỏi kinh nghiệm trong quá trình thiết kế website. Website đang trong quá trình phát triển chân thành cảm ơn mọi sự góp ý của các bạn để làm cho website ngày càng hoàn thiên.

DMCA.com Protection Status
Theo dõi qua Email

Tổng hợp các bài viết về

Hoc php - CodeIgniter Framework - Laravel Framework - PHP va MYSQL