带有多个分类的JS Checkbox过滤器

时间:2016-08-23 10:18:12

标签: javascript jquery checkbox

首先,我在编程方面真的很新,所以我没有太多的专业知识。其次,我的英语不是最好的,但我希望你能理解我的问题。最后但不是最少的,请帮助我,找到问题的问题。非常感谢!对不起可能是重复的帖子,我找不到帮助我的帖子。

问题: 我有一个带有Checkbox过滤器的html文件。任何Checkbox都属于一个类别。例如A,B,C,D,......

因此,当我单击一个复选框时,过滤器正在运行并仅显示类别中的Entrys。

但是当我点击两个复选框时,可能A和B没有任何内容。但应该来自A和B的所有来源。

我买了这个剧本,我曾尝试联系开发者,但过去几周我没有得到他的回答,所以我必须找到我自己的解决方案。

这是我的HTML:

<div class="box">

                                <!-- checkbox filters -->
        <div 
           class="cb-group-filter left"
           data-control-type="checkbox-group-filter"
           data-control-action="filter"
           data-control-name="themes-aa">

           <div class="cb">
              <input            
                 data-path=".aa"                                    
                 id="aa" 
                 type="checkbox"                                    
              />
              <label for="aa">A+</label>
           </div>                                       
        </div>

        <!-- checkbox filters -->
        <div 
           class="cb-group-filter left"
           data-control-type="checkbox-group-filter"
           data-control-action="filter"
           data-control-name="themes-a">

           <div class="cb">
              <input 
                 data-path=".a"                                 
                 id="a" 
                 type="checkbox" />
              <label for="a">A</label>
           </div>                                   
        </div>

这是我的JS脚本:

    jQuery.fn.jplist.controls.Textbox.getStatus(!1,c);c.$jplistBox.trigger(c.options.force_ask_event,[!1])})}})(jQuery);(function(e){jQuery.fn.jplist.controls.Views={};jQuery.fn.jplist.controls.Views.statusRelatedData=function(c){return{isGrid:c}};jQuery.fn.jplist.controls.Views.render=function(c){var a,b,d="list-view";c.$jplistBox.hasClass("grid")&&(d="grid-view");a=c.$control.find(".list-view");b=c.$control.find(".grid-view");c.$control.data("list-view-btn",a);c.$control.data("grid-view-btn",b);c.$control.data("default-grid",d)};jQuery.fn.jplist.controls.Views.getDeepLink=function(c){var a="",b;b=jQuery.fn.jplist.controls.Views.getStatus(!1,
c);b.data&&b.data.isGrid&&(a=c.name+"--isGrid=true");return a};jQuery.fn.jplist.controls.Views.getStatusByDeepLink=function(c,a,b){c=jQuery.fn.jplist.controls.Views.getStatus(!0,c);c.data&&"isGrid"===a&&(c.data.isGrid=!0);return c};jQuery.fn.jplist.controls.Views.getStatus=function(c,a){var b,d=!1;c?(b=a.$control.data("default-grid"))&&"grid-view"===b&&(d=!0):d=a.$jplistBox.hasClass("grid");b=new jQuery.fn.jplist.controls.Views.statusRelatedData(d);return new jQuery.fn.jplist.models.Status(a.name,
a.action,a.type,b,a.cookies,a.category)};jQuery.fn.jplist.controls.Views.setStatus=function(c,a,b){c.data&&(!a.cookies&&b?(a.$jplistBox.removeClass("grid"),c.data.isGrid=!1,a.$jplistBox.trigger(a.options.status_event,[c])):(c=c.data.isGrid)?a.$jplistBox.addClass("grid"):a.$jplistBox.removeClass("grid"))};jQuery.fn.jplist.controls.Views.initEvents=function(c){var a,b;a=c.$control.data("list-view-btn");b=c.$control.data("grid-view-btn");if(0<a.length)a.off("click").on("click",function(){c.$jplistBox.removeClass("grid");
c.events.lastStatus=jQuery.fn.jplist.controls.Views.getStatus(!1,c);c.$jplistBox.trigger(c.options.force_ask_event,[!1])});if(0<b.length)b.off("click").on("click",function(){c.$jplistBox.addClass("grid");c.events.lastStatus=jQuery.fn.jplist.controls.Views.getStatus(!1,c);c.$jplistBox.trigger(c.options.force_ask_event,[!1])})}})(jQuery);(function(e){e.fn.jplist.controls.CheckboxFilter={};e.fn.jplist.controls.CheckboxFilter.render=function(c){var a=c.$control.get(0).checked;!0!==a&&(a=!1);c.$control.data("default-checked",a)};e.fn.jplist.controls.CheckboxFilter.getDeepLink=function(c){var a="",b;b=e.fn.jplist.controls.CheckboxFilter.getStatus(!1,c);b.data&&b.data.isChecked&&(a=c.name+"--isChecked=true");return a};e.fn.jplist.controls.CheckboxFilter.getStatusByDeepLink=function(c,a,b){c=e.fn.jplist.controls.CheckboxFilter.getStatus(!0,
c);c.data&&"isChecked"===a&&(c.data.isChecked=!0);return c};e.fn.jplist.controls.CheckboxFilter.getPaths=function(c,a){var b;if(b=c.$control.attr("data-path"))b=new e.fn.jplist.models.Path(b,"text"),e.fn.jplist.services.Path.isPathInList(b,a)||a.push(b);b=c.$jplistBox.find('[data-control-type="'+c.type+'"][data-control-action="'+c.action+'"][data-logic="or"]');c.$jplistBox.data("jplist-all-cb-or",b)};e.fn.jplist.controls.CheckboxFilter.getStatus=function(c,a){var b=null,d,f,b="and";(f=a.$control.attr("data-logic"))&&
"or"===f.toString()&&(b="or");c?(f=a.$control.data("default-checked"),!0!==f&&(f=!1)):f=a.$control.get(0).checked;"and"===b?d={path:a.$control.attr("data-path"),type:"text",filterType:"path",isChecked:f}:(d=a.$jplistBox.data("jplist-all-cb-or"),d={path:a.$control.attr("data-path"),type:"text",filterType:"inverted_path",checked_checkboxes:d.filter(":checked"),isChecked:f});"and"===b?f||(d.filterType=""):f&&(d.filterType="");return b=new e.fn.jplist.models.Status(a.name,a.action,a.type,d,a.cookies,
a.category)};e.fn.jplist.controls.CheckboxFilter.setStatus=function(c,a,b){a.$control.attr("data-logic");a.$control.attr("data-path");!0!==c.data.isChecked?a.$control.get(0).checked=!1:a.$control.get(0).checked=!0};e.fn.jplist.controls.CheckboxFilter.initEvents=function(c){c.$control.off().change(function(){c.events.lastStatus=e.fn.jplist.controls.CheckboxFilter.getStatus(!1,c);c.$jplistBox.trigger(c.options.force_ask_event,[!1])})}})(jQuery);(function(e){e.fn.jplist.controls.CheckboxGroupFilter={};e.fn.jplist.controls.CheckboxGroupFilter.statusRelatedData=function(c){return{pathGroup:c,filterType:"pathGroup"}};e.fn.jplist.controls.CheckboxGroupFilter.render=function(c){c=c.$control;var a=c.find("[data-path]");a.each(function(){var a=$(this);a.data("checked",a.get(0).checked)});c.data("checkboxes",a)};e.fn.jplist.controls.CheckboxGroupFilter.getDeepLink=function(c){var a="",b,d="";b=e.fn.jplist.controls.CheckboxGroupFilter.getStatus(!1,
c);if(b.data&&$.isArray(b.data.pathGroup)&&0<b.data.pathGroup.length){for(a=0;a<b.data.pathGroup.length;a++)""!==d&&(d+="~"),d+=b.data.pathGroup[a];a=c.name+"--pathGroup="+d}return a};e.fn.jplist.controls.CheckboxGroupFilter.getStatusByDeepLink=function(c,a,b){c=e.fn.jplist.controls.CheckboxGroupFilter.getStatus(!0,c);c.data&&"pathGroup"===a&&(a=b.split("~"),0<a.length&&(c.data.pathGroup=a));return c};e.fn.jplist.controls.CheckboxGroupFilter.getPaths=function(c,a){var b=c.$control.data("checkboxes"),
d;if(b)for(var f=0;f<b.length;f++)if(d=b.eq(f),d=d.attr("data-path"))d=new e.fn.jplist.models.Path(d,"text"),e.fn.jplist.services.Path.isPathInList(d,a)||a.push(d)};e.fn.jplist.controls.CheckboxGroupFilter.getStatus=function(c,a){var b=a.$control.data("checkboxes"),d=[],f,h,k;if(c)for(k=0;k<b.length;k++){if(f=b.eq(k),h=f.data("checked"))(h=f.attr("data-path"))&&d.push(h)}else for(k=0;k<b.length;k++)f=b.eq(k),(h=f.attr("data-path"))&&f.get(0).checked&&d.push(h);b=new e.fn.jplist.controls.CheckboxGroupFilter.statusRelatedData(d);
return new e.fn.jplist.models.Status(a.name,a.action,a.type,b,a.cookies,a.category)};e.fn.jplist.controls.CheckboxGroupFilter.setStatus=function(c,a,b){var d;if(a=a.$control.data("checkboxes"))if(a.each(function(){$(this).get(0).checked=!1}),c.data&&c.data.pathGroup&&$.isArray(c.data.pathGroup)&&0<c.data.pathGroup.length)for(b=0;b<c.data.pathGroup.length;b++)d=c.data.pathGroup[b],d=a.filter('[data-path="'+d+'"]'),0<d.length&&(d.get(0).checked=!0)};e.fn.jplist.controls.CheckboxGroupFilter.initEvents=
function(c){c.$control.data("checkboxes").off("change").change(function(){c.events.lastStatus=e.fn.jplist.controls.CheckboxGroupFilter.getStatus(!1,c);c.$jplistBox.trigger(c.options.force_ask_event,[!1])})}})(jQuery);(function(e){e.fn.jplist.controls.CheckboxTextFilter={};e.fn.jplist.controls.CheckboxTextFilter.statusRelatedData=function(c,a,b,d){return{textGroup:c,logic:a,path:b,ignoreRegex:d,filterType:"textGroup"}};e.fn.jplist.controls.CheckboxTextFilter.render=function(c){c=c.$control;var a=c.find('input[type="checkbox"]');a.each(function(){var a=$(this);a.data("checked",a.get(0).checked)});c.data("checkboxes",a)};e.fn.jplist.controls.CheckboxTextFilter.getDeepLink=function(c){var a="",b,d="";b=e.fn.jplist.controls.CheckboxTextFilter.getStatus(!1,
c);if(b.data&&$.isArray(b.data.textGroup)&&0<b.data.textGroup.length){for(a=0;a<b.data.textGroup.length;a++)""!==d&&(d+="~"),d+=b.data.textGroup[a];a=c.name+"--textGroup="+d}return a};e.fn.jplist.controls.CheckboxTextFilter.getStatusByDeepLink=function(c,a,b){var d=null,d=e.fn.jplist.controls.CheckboxTextFilter.getStatus(!0,c);d.data&&"textGroup"===a&&(c=b.split("~"),0<c.length&&(d.data.textGroup=c));return d};e.fn.jplist.controls.CheckboxTextFilter.getPaths=function(c,a){var b;if(b=c.$control.attr("data-path"))b=
new e.fn.jplist.models.Path(b,"text"),e.fn.jplist.services.Path.isPathInList(b,a)||a.push(b)};e.fn.jplist.controls.CheckboxTextFilter.getStatus=function(c,a){var b=a.$control,d=b.data("checkboxes"),f;f=[];var h,k,g="",l;if(c)for(l=0;l<d.length;l++){if(k=d.eq(l),h=k.data("checked"))(h=k.val())&&f.push(h)}else for(l=0;l<d.length;l++)k=d.eq(l),(h=k.val())&&k.get(0).checked&&f.push(h);d=b.attr("data-path");(b=b.attr("data-logic"))||(b="or");a.controlTypeOptions&&a.controlTypeOptions.ignore&&(g=a.controlTypeOptions.ignore);
f=new e.fn.jplist.controls.CheckboxTextFilter.statusRelatedData(f,b,d,g);return new e.fn.jplist.models.Status(a.name,a.action,a.type,f,a.cookies,a.category)};e.fn.jplist.controls.CheckboxTextFilter.setStatus=function(c,a,b){var d;if(a=a.$control.data("checkboxes"))if(a.each(function(){$(this).get(0).checked=!1}),c.data&&c.data.textGroup&&$.isArray(c.data.textGroup)&&0<c.data.textGroup.length)for(b=0;b<c.data.textGroup.length;b++)d=c.data.textGroup[b],d=a.filter('[value="'+d+'"]'),0<d.length&&(d.get(0).checked=
!0)};e.fn.jplist.controls.CheckboxTextFilter.initEvents=function(c){c.$control.data("checkboxes").off("change").change(function(){c.events.lastStatus=e.fn.jplist.controls.CheckboxTextFilter.getStatus(!1,c);c.$jplistBox.trigger(c.options.force_ask_event,[!1])})}})(jQuery);(function(e){jQuery.fn.jplist.controls.ButtonFilter={};jQuery.fn.jplist.controls.ButtonFilter.render=function(c){c.$control.data("selected",!1)};jQuery.fn.jplist.controls.ButtonFilter.getDeepLink=function(c){var a="",b;b=jQuery.fn.jplist.controls.ButtonFilter.getStatus(!1,c);b.data&&b.data.selected&&(a=c.name+"--selected=true");return a};jQuery.fn.jplist.controls.ButtonFilter.getStatusByDeepLink=function(c,a,b){c=jQuery.fn.jplist.controls.ButtonFilter.getStatus(!0,c);c.data&&"selected"===a&&(c.data.selected=
!0);return c};jQuery.fn.jplist.controls.ButtonFilter.getPaths=function(c,a){var b;if((b=c.$control.attr("data-path"))&&""!==e.trim(b))b=new jQuery.fn.jplist.models.Path(b,"text"),jQuery.fn.jplist.services.Path.isPathInList(b,a)||a.push(b)};jQuery.fn.jplist.controls.ButtonFilter.getStatus=function(c,a){var b;b=(b=c?!1:a.$control.data("selected"))?{path:a.$control.attr("data-path"),type:"text",filterType:"path",selected:b}:{path:a.$control.attr("data-path"),type:"text",filterType:"",selected:b};return new jQuery.fn.jplist.models.Status(a.name,
a.action,a.type,b,a.cookies,a.category)};jQuery.fn.jplist.controls.ButtonFilter.setStatus=function(c,a,b){a.$control.data("selected",c.data.selected);c.data.selected?a.$control.addClass("selected"):a.$control.removeClass("selected")};jQuery.fn.jplist.controls.ButtonFilter.initEvents=function(c){var a;c.$control.off().click(function(){a=c.$control.data("selected");c.$control.data("selected",!a);a?c.$control.removeClass("selected"):c.$control.addClass("selected");c.$jplistBox.trigger(c.options.force_ask_event,
[!1])})}})(jQuery);(function(e){jQuery.fn.jplist.controls.ButtonFilterGroup={};jQuery.fn.jplist.controls.ButtonFilterGroup.render=function(c){var a=c.$control.find("[data-button]");a.each(function(){e(this).data("selected",!1)});c.$control.data("$buttons",a)};jQuery.fn.jplist.controls.ButtonFilterGroup.getDeepLink=function(c){return""};jQuery.fn.jplist.controls.ButtonFilterGroup.getStatusByDeepLink=function(c,a,b){return null};jQuery.fn.jplist.controls.ButtonFilterGroup.getPaths=function(c,a){var b=c.$control.data("$buttons"),
d;if(b)for(var f=0;f<b.length;f++)if(d=b.eq(f),d=d.attr("data-path"))d=new jQuery.fn.jplist.models.Path(d,"text"),jQuery.fn.jplist.services.Path.isPathInList(d,a)||a.push(d)};jQuery.fn.jplist.controls.ButtonFilterGroup.getStatus=function(c,a){var b=a.$control.data("$buttons"),d=[],f,e,k;for(e=0;e<b.length;e++)if(f=b.eq(e),k=f.data("selected"))(f=f.attr("data-path"))&&d.push(f);return new jQuery.fn.jplist.models.Status(a.name,a.action,a.type,{pathGroup:d,filterType:"pathGroup"},a.cookies,a.category)};
jQuery.fn.jplist.controls.ButtonFilterGroup.setStatus=function(c,a,b){var d;if(a=a.$control.data("$buttons"))if(a.each(function(){e(this).removeClass("selected")}),c.data&&c.data.pathGroup&&e.isArray(c.data.pathGroup)&&0<c.data.pathGroup.length)for(b=0;b<c.data.pathGroup.length;b++)d=c.data.pathGroup[b],d=a.filter('[data-path="'+d+'"]'),0<d.length&&d.addClass("selected")};jQuery.fn.jplist.controls.ButtonFilterGroup.initEvents=function(c){var a,b=c.$control.data("$buttons");if(b)b.off("click").on("click",
function(){var b;b=e(this);a=b.data("selected");b.data("selected",!a);c.events.lastStatus=jQuery.fn.jplist.controls.ButtonFilterGroup.getStatus(!1,c);c.$jplistBox.trigger(c.options.force_ask_event,[!1])})}})(jQuery);(function(e){jQuery.fn.jplist.controls.ButtonTextFilter={};jQuery.fn.jplist.controls.ButtonTextFilter.render=function(c){c.$control.data("selected",!1);c.$control.data("dataPath",c.$control.attr("data-path"));c.$control.data("dataText",c.$control.attr("data-text"))};jQuery.fn.jplist.controls.ButtonTextFilter.statusRelatedData=function(c,a,b,d){return{path:c,ignore:b,value:a,selected:d,filterType:"text"}};jQuery.fn.jplist.controls.ButtonTextFilter.getDeepLink=function(c){var a="",b;b=jQuery.fn.jplist.controls.ButtonTextFilter.getStatus(!1,

任何人都可以帮助我吗?

非常感谢马里奥

1 个答案:

答案 0 :(得分:0)

你需要这样的例子吗?

$("#filters :checkbox").click(function() {
   $("div").hide();
   $("#filters :checkbox:checked").each(function() {
       $("." + $(this).val()).show();
   });
});

http://jsfiddle.net/6wYzw/41/

如果是这样,它在这里回答:Filtering with checkboxes using jQuery

由用户:@nnnnnn