onChange event wont function using iCheck plugin

Question

I used iCheck plugin to style my radio and checkbox. But it my function wont work if I try to include the iCheck.

Here's my code:

<div id="category-row" class="filter_block col-md-12 rb_nopadding">
    <h5>BROWSE BY</h5>
    <ul class="list-unstyled">
        <li>
            <input type="radio" id="cat-1" class="category_select"  name="category_type" data-category-type="1" value="all_product" <?php echo ($category == '' || $category == 'all_product') ? 'checked="checked"' : ''; ?> />
            <label for="cat-1" class="<?php echo ($category == '' || $category == 'all_product') ? '' : ''?>"><span></span>All</label>      
        </li>
        <li>
            <input type="radio" id="cat-2" class="category_select"  name="category_type" data-category-type="2" value="japanese_tea" <?php echo ($category == 'japanese_tea') ? 'checked="checked"' : ''; ?> />
            <label for="cat-2" class="<?php echo ($category == 'japanese_tea') ? 'active' : ''?>"><span></span>Japanese Tea</label>     
        </li>
        <li>
            <input type="radio" id="cat-3" class="category_select"  name="category_type" data-category-type="3" value="black_vinegar" <?php echo ($category == 'black_vinegar') ? 'checked="checked"' : ''; ?> />
            <label for="cat-3" class="<?php echo ($category == 'black_vinegar') ? 'active' : ''?>"><span></span>Black Vinegar</label>       
        </li>
        <li>
            <input type="radio" id="cat-4" class="category_select"  name="category_type" data-category-type="4" value="food" <?php echo ($category == 'food') ? 'checked="checked"' : ''; ?> />
            <label for="cat-4" class="<?php echo ($category == 'food') ? 'active' : ''?>"><span></span>Food</label>     
        </li>
        <li>
            <input type="radio" id="cat-5" class="category_select"  name="category_type" data-category-type="5" value="cosmetic_health" <?php echo ($category == 'cosmetic_health') ? 'checked="checked"' : ''; ?> />
            <label for="cat-5" class="<?php echo ($category == 'cosmetic_health') ? 'active' : ''?>"><span></span>Cosmetic / Health</label>     
        </li>
        <li>
            <input type="radio" id="cat-6" class="category_select"  name="category_type" date-category-type="6" value="others" <?php echo ($category == 'others') ? 'checked="checked"' : ''; ?> />
            <label for="cat-6" class="<?php echo ($category == 'others') ? 'active' : ''?>"><span></span>Others</label>     
        </li>
    </ul>
</div>

Then my JS

$('.category_select').on('change', function() {

    var id = $(this).val();
    var cat = $(this);
    var category_type = $(this).data('category-type');

    console.log(id);

    $('.category_select').next('label').css({'color':'#222'})
    $(cat).next('label').css({'color':'#C5B06C'});

    var url = 'index.php?route=shops/shops/shopInfo&user_id=<?php echo $shop_id; ?>';
    var filter_category = cat.val();

    if(filter_category != '') {
        url += '&filter_category=' + encodeURIComponent(filter_category);
    }

    location = url;

});

If I removed the icCheck it works but it doesn't work if I try to include iCheck plugin.

Can you help me with this?

Answer 1

Ok I found where did I go wrong. There's already event in the iCheck plugin that I missed.

Here's what I did:

I change

$('.category_select').on('change', function() {

to

$('.category_select').on('ifChanged', function() {

and now its working.