lundi 4 avril 2016

JQuery filter using checkboxes which highlights remaining options

I'm looking for a way of using Jquery or Javascript to filter a data array with the use of checkboxes.

This question is related to a previous question on filtering. However I'm looking for a method enhancing the already good solution provided by @charlietfl

The additional functionality I'm looking for is the ability to highlight check boxes that are still able to filter the array. So after the first checkbox has been selected this renders several checkboxes useless as they are not longer able to filter the array. I would like these unhelpful checkboxes to fade out a little (label colour grey instead of black)

Is there anyway of modifying the answer provided provided by Charliet to allow the filter checkboxes to grey out other filter checkboxes in addition to filtering the array?

For example if filter1 checkbox 1 is ticked then this rules out many options. Perhaps the checkboxes which are not able to further filter the results could changing a little (perhaps change the labels text from black to grey).

This would avoid the user trying to filter with checkbox combinations which would not provide any results.

Any hints tips much appreciated

Here is the code from the original answer

var $results=$('.result'),
$checks=$(':checkbox[name^=fl]');

$checks.change(function(){
var $checked=$checks.filter(':checked');
/* show all when nothing checked*/
if(!$checked.length){
    $results.show();
    return; /* quit here if nothing checked */
}
/* create array of checked values */
var checkedVals= $.map($checked, function(el){
    return el.value
});
/* hide all results, then filter for matches */
$results.hide().filter(function(){
    /* split categories for this result into an array*/
    var cats=$(this).data('category').split(' ');
    /* filter the checkedVals array to only values that match */
    var checkMatches=$.grep(checkedVals, function(val){              
        return $.inArray(val, cats) >-1;
    });
    /* only return elements with matched array and original array being same     length */             
    return checkMatches.length === checkedVals.length;
 /* show results that match all the checked checkboxes */            
}).show();
/* do something when there aren't any matches */
if(!$results.length){
   alert('Ooops...no matches');
}


});




Aucun commentaire:

Enregistrer un commentaire