drgullin / icheck

Highly customizable checkboxes and radio buttons (jQuery & Zepto)
http://fronteed.com/iCheck
7.38k stars 1.62k forks source link

Trouble with callbacks #286

Closed CharlyPoppins closed 9 years ago

CharlyPoppins commented 9 years ago

Hi, trying ti use callbacks but it didn't work

$('.tree input[type="checkbox"]:not(".switch")').iCheck({
        checkboxClass: 'icheckbox_flat-purple',
        increaseArea: '-30%'
    }).on('ifToggled', function(event){
        console.log("toggled");
        $(this).parent().parent().addClass("tree-selected");
    }).on('ifChecked', function(event){
        console.log("add selected");
        $(this).parent().parent().addClass("tree-selected");
    }).on('ifUnchecked', function(event){
        console.log("remove selected");
        $(this).parent().parent().removeClass("tree-selected");
    });
var Radios = $('.tree input[type="radio"]:not(".switch")');
    $(Radios).iCheck({
        radioClass: 'iradio_flat-purple',
        increaseArea: '-30%'
    });
    $(Radios).on('ifToggled', function(event){
        console.log("toggled");
        $(this).parent().parent().addClass("tree-selected");
    });
    $(Radios).on('ifChecked', function(event){
        console.log("add selected");
        $(this).parent().parent().addClass("tree-selected");
    });
    $(Radios).on('ifUnchecked', function(event){
        console.log("remove selected");
        $(this).parent().parent().removeClass("tree-selected");
    });

What am I missing ?

vanydiah commented 9 years ago

Hi, i have a similiar problem

$(document).ready(function(){
    $('.feed').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
            increaseArea: '20%' // optional
     });
});

i want to give 'active' state on the label if it's radio button checked, i use these codes below but none of them are working... 1.

$('.feed').on('ifChecked', function(){
    $('.iradio_square-green.checked').siblings('label').addClass('active');
});

2.

$('.feed').on('ifChecked', function(){
    if ($(this).parent('.iradio_square-green').hasClass('checked')){
        $(this).parent('.iradio_square-green').siblings('.label').addClass('active');
        $('.content-item .feed_backform .itemlabel').not($(this).parent('.iradio_square-green').siblings(' label')).removeClass('active');  
    }
});
CharlyPoppins commented 9 years ago

Still haven't found yet...

andreyvolokitin commented 9 years ago

You should bind events before iCheck initialization

CharlyPoppins commented 9 years ago

I use ifChanged on both radio and checkbox, and trigger the change event of the input, then I bind .change on radios that find a checkbox, check the input and update the iCheck object.

$('.tree input').on('ifChanged', function (event) { $(event.target).trigger('change'); });
$('.tree input[type="radio"]').change(function() {
        // find an input
        $(input).attr('checked', this.checked);
        $(input).iCheck('update');
}