Search jQuery

jQuery Forum

Checkbox filter

in Getting Started • 8 years ago

Hi guys.

I have a simple HTML table that I would like to filter with checkboxes. Here is my example: http://jsfiddle.net/51wwnyeg/1/.

As you can see, if you click on the checkbox, it filters the table and only shows rows with city you clicked on. But my problem is, it only works with one checkbox checked, if I check multiple it doesn't work.

Any ideas?

Thanks!

Replies(14)

jakecigar

Re: Checkbox filter

8 years ago

Take a look at http://jsfiddle.net/jakecigar/51wwnyeg/2/ .

Your contains code can’t work with multiple values.

$(document).ready(function () {
$("input:checkbox").on("change", function () {
var a = $("input:checkbox:checked").map(function () {
return $(this).val()
}).get()
$("#tabela1 tr").hide();
var cities = $(".city").filter(function () {
var city = $(this).text(),
index = $.inArray(city, a);
return index >= 0
}).parent().show();
}).first().change()
});

JΛ̊KE

MarkWebber

Re: Checkbox filter

8 years ago

I'm new to jquery, so some lines in your code are still confusing to me. But still, is there a way to show a table as whole on beginning , because now it's hidden if you don't click on checkboxes?

Thanks!

jakecigar

Re: Checkbox filter

8 years ago

}).first().change()

does the hiding. change it to

})

http://jsfiddle.net/jakecigar/51wwnyeg/3/ <--

I used a lot of jQuery methods, so please ask about anything you don’t understand.

JΛ̊KE

MarkWebber

Re: Checkbox filter

8 years ago

Hey Jake, sorry for late replay. I now have basic understanding what each line does, but now I can't figure it out how to include age filter. Here: http://jsfiddle.net/51wwnyeg/6/

Thanks!

jakecigar

Re: Checkbox filter

8 years ago

http://jsfiddle.net/jakecigar/51wwnyeg/7/ starts off with the ages that are selected. You need to decide how you will test the ranges, and how to handle them.

JΛ̊KE

MarkWebber

Re: Checkbox filter

8 years ago

I've given up on age filter and decided to add simple "job" filter that can either be (Worker or Student). See here: http://jsfiddle.net/51wwnyeg/10/ .

As you can see it works if I check city and job filters separately, but not together. What to do to get them work together?

jakecigar

Re: Checkbox filter

8 years ago

You achieved an OR condition. I would think you should use an AND condition.

JΛ̊KE

MarkWebber

Re: Checkbox filter

8 years ago

index = $.inArray(city, kraj) && $.inArray(profession, job);

Does not work because "profession" variable is local variable and I get (profession is not defined) error. http://jsfiddle.net/51wwnyeg/11/

jakecigar

Re: Checkbox filter

8 years ago

Take a look at http://jsfiddle.net/jakecigar/51wwnyeg/12/ <-- I get both "lists" of people to be showed. Then I use a trick with .filter to get the right ones to show.

JΛ̊KE

MarkWebber