Chọn tất cả / bỏ chọn tất cả cho các Checkbox

Một tip để các bạn có thể chọn / bỏ chọn tất cả các checkbox trên form bằng cách sử dụng Jquery.









1. Ví dụ tôi có 1 form html như sau :

<ul>

<li><input type="checkbox" id="selecctall"/> Selecct All</li> <!-- Check box for select / deselect all -->

<li><input class="checkbox1" type="checkbox" name="check[]" value="item1"> This is Item 1</li>

<li><input class="checkbox1" type="checkbox" name="check[]" value="item2"> This is Item 2</li>

<li><input class="checkbox1" type="checkbox" name="check[]" value="item3"> This is Item 3</li>

<li><input class="checkbox1" type="checkbox" name="check[]" value="item4"> This is Item 4</li>

<li><input class="checkbox1" type="checkbox" name="check[]" value="item5"> This is Item 5</li>

<li><input class="checkbox1" type="checkbox" name="check[]" value="item6"> This is Item 6</li>

<li><input class="checkbox2" type="checkbox" name="check[]" value="item6"> Do not select this</li>

</ul>

 2. Sửa dụng đoạn code javascript sau để chạy tính năng chọn hoặc bỏ chọn tất cả:

$(document).ready(function() {

    $('#selecctall').click(function(event) {  //on click
        if(this.checked) { // check select status
            $('.checkbox1').each(function() { //loop through each checkbox
                this.checked = true;  //select all checkboxes with class "checkbox1"            
            });

        }else{
            $('.checkbox1').each(function() { //loop through each checkbox
                this.checked = false; //deselect all checkboxes with class "checkbox1"                    
            });      
        }
    });

});

Hoặc nếu bạn sử dụng  jQuery 1.6 trở lên bạn có thể dùng cách đơn giản hơn như sau:

$(document).ready(function(){

    $("#selecctall").change(function(){
      $(".checkbox1").prop('checked', $(this).prop("checked"));
      });

});