Funkcja "wybierz wszystko" i iCheck

Question

Chcę zaimplementować "Wybierz wszystko" za pomocą iCheck.

To, co zrobiłem do tej pory:

$(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/

chcę, że kiedy "Check Box 1", "Check Box 2", "Sprawdź ramka 3" , "Check Box 4" są zaznaczone, "Select all" również zostaje wybrane.

Dokładnie tak: jsfiddle.net/ivanionut/N7uYR/

Jak mogę to zrobić?

Answer 1

Oto, co wymyśliłem.

$(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

możesz użyć rodzica z ur pola wyboru, aby to zrobić. na przykład

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

i przy użyciu jquery ustawić attr ("sprawdzone"), czy nie.

Answer 3

W przypadku, ktoś inny potyka całej tej kwestii, przyjęte rozwiązanie nie działa dla mnie na dynamicznie generowanych pól wyboru. Znalazłem rozwiązanie tutaj:

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

Answer 4

Dla każdego, nadal zmaga się z tym, jakie zmieniły zaakceptowane odpowiedź https://stackoverflow.com/a/17821003/3061836) od Dzulqarnain Nasir trochę.

zmieniłem metodę removeProp metody prop:

checkAll.removeProp('checked'); 

ulega zmianie na

checkAll.prop('checked', false); 

Sposób removeProp nie dla mnie, ale ustawienie zaznaczone właściwość false pracował.

W chwili pisania tego artykułu korzystam z iCheck 1.0.2 z jQuery 2.1.4