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