Funzione "seleziona tutto" e iCheck

Question

Desidero implementare un "Seleziona tutto" utilizzando iCheck.

Questo è quello che ho fatto finora:

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

voglio che quando "Check Box 1", "Check Box 2", "Check Box 3" , "Check Box 4" sono selezionati, anche "Select all" viene selezionato.

esattamente così: jsfiddle.net/ivanionut/N7uYR/

Come posso fare questo?

Answer 1

Ecco cosa mi è venuto in mente.

$(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 puoi utilizzare il padre delle tue caselle di controllo per farlo. per esempio

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

e utilizzando jQuery per impostare attr ("controllato") oppure no.

Answer 3

Nel caso in cui nessun altro si imbatte in questo problema, la risposta accettata non funzionava per me su caselle di controllo generati in modo dinamico. Ho trovato la soluzione qui:

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

Answer 4

Per chi ancora alle prese con questo, ho alterato la risposta accettata https://stackoverflow.com/a/17821003/3061836) da Dzulqarnain Nasir un po '.

ho cambiato il metodo removeProp al metodo prop:

checkAll.removeProp('checked'); 

è alterato per

checkAll.prop('checked', false); 

Il metodo removeProp non ha funzionato per me, ma l'impostazione della proprietà controllato per falso lavorato.

Al momento della scrittura, sto usando iCheck 1.0.2 con jQuery 2.1.4