Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/68.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
jQuery根据复选框状态进行筛选_Jquery_Checkbox - Fatal编程技术网

jQuery根据复选框状态进行筛选

jQuery根据复选框状态进行筛选,jquery,checkbox,Jquery,Checkbox,我正在使用jQuery“filterable”插件来过滤数据,这个插件最初通过点击类别的名称链接来过滤数据,现在我想将链接改为复选框,所以如果选中复选框,特定类别就会显示,如果不选中,它就会隐藏。 以下是jquery: (function(jQuery) { jQuery.fn.filterable = function(settings) { settings = jQuery.extend({ useHash: true,

我正在使用jQuery“filterable”插件来过滤数据,这个插件最初通过点击类别的名称链接来过滤数据,现在我想将链接改为复选框,所以如果选中复选框,特定类别就会显示,如果不选中,它就会隐藏。 以下是jquery:

(function(jQuery) {
    jQuery.fn.filterable = function(settings) {
        settings = jQuery.extend({
            useHash: true,
            animationSpeed: 1000,
            show: { width: 'show', height: 'show', opacity: 'show' },
            hide: { width: 'hide', height: 'hide', opacity: 'hide' },
            useTags: true,
            tagSelector: '#portfolio-filter input[type=checkbox]',
            selectedTagClass: 'current',
            allTag: 'all'
        }, settings);

        return jQuery(this).each(function(){

            /* FILTER: select a tag and filter */
            jQuery(this).bind("filter", function( e, tagToShow ){
                if(settings.useTags){
                    jQuery(settings.tagSelector).removeClass(settings.selectedTagClass);
                    jQuery(settings.tagSelector + '[value=' + tagToShow + ']').addClass(settings.selectedTagClass);
                }
                jQuery(this).trigger("filterportfolio", [ tagToShow.substr(1) ]);
            });

            /* FILTERPORTFOLIO: pass in a class to show, all others will be hidden */
            jQuery(this).bind("filterportfolio", function( e, classToShow ){
                if(classToShow == settings.allTag){
                    jQuery(this).trigger("show");
                }else{
                    jQuery(this).trigger("show", [ '.' + classToShow ] );
                    jQuery(this).trigger("hide", [ ':not(.' + classToShow + ')' ] );
                }
                if(settings.useHash){

                    location.hash = '#' + classToShow;
                }
            });

            /* SHOW: show a single class*/
            jQuery(this).bind("show", function( e, selectorToShow ){
                jQuery(this).children(selectorToShow).animate(settings.show, settings.animationSpeed);
            });

            /* SHOW: hide a single class*/
            jQuery(this).bind("hide", function( e, selectorToHide ){
                jQuery(this).children(selectorToHide).animate(settings.hide, settings.animationSpeed);  
            });

            /* ============ Check URL Hash ====================*/
            if(settings.useHash){
                if(location.hash != '')
                    jQuery(this).trigger("filter", [ location.hash ]);
                else
                    jQuery(this).trigger("filter", [ '#' + settings.allTag ]);
            }

            /* ============ Setup Tags ====================*/
            if(settings.useTags){
                jQuery(settings.tagSelector).click(function(){
                    jQuery('#portfolio-list').trigger("filter", [ jQuery(this).attr('value') ]);

                    jQuery(settings.tagSelector).removeClass('current');
                    jQuery(this).addClass('current');
                });
            }
        });
    }
})(jQuery);
我使用的是“hash”方法,所以当选中相对复选框时,它会在页面url的末尾添加类似“#categoryname”的内容,然后它会显示一些与该复选框相关的项目,现在我想在复选框未选中时隐藏这些项目,并删除该hash