onChange事件不会使用iCheck插件

时间:2016-02-02 02:16:05

标签: javascript jquery icheck

我使用iCheck插件来设置收音机和复选框的样式。但是如果我尝试包含iCheck,我的功能就不会起作用。

这是我的代码:

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

然后我的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;

});

如果我删除了icCheck它可以工作但是如果我尝试包含iCheck插件它就不起作用。

你能帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:3)

好的,我发现我哪里出错了。我错过了iCheck插件中的事件。

这就是我的所作所为:

我改变了

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

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

现在正在工作。