samedi 1 décembre 2018

Let iCheck only execute once on unchecking group of checkboxes

i am creating a filter system using AJAX. One of the filters contains a bunch of checkboxes with interests.

I built these checkboxes and styled with iCheck JS library. Like this:

<div class="interests">
<div class="category-title mt-3">
    <h4 class="card-title mb-0">Interesses <span class="small"><a href="#" id="resetInterests">(wissen)</a></span></h4>
    <hr>
</div>
<div class="sidebar-list">
    <ul class="skin-square skin searchinterests">
        <?php
        foreach ($interests as $int) {
            $id = "interest-" . $int->interest_id;
            ?>
            <li>
                <input type="checkbox" id="<?=$id?>" name="interests[]" value="<?=$int->interest_id?>">
                <label for="<?=$id?>">
                    <?=$int->full_name?>
                </label>
                <span class="pull-right">49</span>
            </li>
            <?php
        }
        ?>
    </ul>
</div>

Then in my javascript i've got the following code:

var searchSelectedInterests = [];

$(document).ready(function(){
    'use strict';

    // Square Checkbox & Radio
    $('.skin-square input').iCheck({
        checkboxClass: 'icheckbox_square-blue'
    });
    $('.searchinterests input').on('ifChecked', function(event) {
        var interestid = event.target.value;
        searchSelectedInterests.push(interestid);
        performSearch();
    });
    $('.searchinterests input').on('ifUnchecked', function(event) {
        var interestid = event.target.value;
        var arrayPos = $.inArray(interestid, searchSelectedInterests);
        if (arrayPos > -1) {
            searchSelectedInterests.splice(arrayPos, 1);
        }
        performSearch();
    });


    $('#resetInterests').on('click', function(e) {
        e.preventDefault();
        $("input[name='interests[]']").iCheck('uncheck');
    });
});

The problem is that because the iCheck('uncheck') will trigger the 'ifUnchecked' event for every single checkbox that I want to uncheck (if there were 10 checkboxes checked, it will perform my AJAX search request 10 times). This gives me unwanted results, i would rather have all the checkboxes being unchecked and the ifUnchecked event fired once.




Aucun commentaire:

Enregistrer un commentaire