Chức năng "chọn tất cả" và iCheck

Question

Tôi muốn triển khai "Chọn tất cả" bằng cách sử dụng iCheck.

Đây là những gì tôi đã thực hiện cho đến nay:

$(function() { 
    $('input').iCheck(); 
    $('input.all').on('ifChecked ifUnchecked', function(event) { 
     if (event.type == 'ifChecked') { 
      $('input.check').iCheck('check'); 
     } else { 
      $('input.check').iCheck('uncheck'); 
     } 
    }); 
    $('input.check').on('ifUnchecked', function(event) { 
     $('input.all').iCheck('uncheck'); 
    }); 
}); 

Fiddle: jsfiddle.net/N7uYR/1/

Tôi muốn rằng khi "Kiểm tra Hộp 1", "Kiểm tra Hộp 2", "Kiểm tra Hộp 3" , "Check Box 4" được chọn, "Select all" cũng được chọn.

Chính xác như thế này: jsfiddle.net/ivanionut/N7uYR/

Làm thế nào tôi có thể làm điều này?

Answer 1

Đây là những gì tôi nghĩ ra.

$(function() { 
    var checkAll = $('input.all'); 
    var checkboxes = $('input.check'); 

    $('input').iCheck(); 

    checkAll.on('ifChecked ifUnchecked', function(event) {   
     if (event.type == 'ifChecked') { 
      checkboxes.iCheck('check'); 
     } else { 
      checkboxes.iCheck('uncheck'); 
     } 
    }); 

    checkboxes.on('ifChanged', function(event){ 
     if(checkboxes.filter(':checked').length == checkboxes.length) { 
      checkAll.prop('checked', 'checked'); 
     } else { 
      checkAll.removeProp('checked'); 
     } 
     checkAll.iCheck('update'); 
    }); 
}); 

jsFiddle

Answer 2

u có thể sử dụng hộp kiểm tra của cha mẹ của ur để thực hiện. ví dụ

<div class='allchecked'> 
<input type="checkbox"/> 
<input type="checkbox"/> 

và sử dụng jquery để thiết attr ("kiểm tra") hay không.

Answer 3

Trong trường hợp bất cứ ai tình cờ khác qua vấn đề này, câu trả lời chấp nhận được không làm việc cho tôi vào hộp kiểm tạo động. Tôi tìm thấy giải pháp ở đây:

https://github.com/fronteed/iCheck/issues/44

Answer 4

Đối với bất cứ ai vẫn phải vật lộn với điều này, tôi đã thay đổi câu trả lời chấp nhận https://stackoverflow.com/a/17821003/3061836) từ Dzulqarnain Nasir một chút.

Tôi đã thay đổi phương pháp removeProp đến prop phương pháp:

checkAll.removeProp('checked'); 

là thay đổi để

checkAll.prop('checked', false); 

Phương pháp removeProp không làm việc cho tôi, nhưng thiết lập thuộc tính false kiểm tra đã làm việc.

Tại thời điểm viết bài, tôi đang sử dụng iCheck 1.0.2 với jQuery 2.1.4