Filter content using checkboxes & JQuery - php

Question

I'm having problems making this code work:
$(function(){
$('div.tags').delegate('input:checkbox', 'change', function() {
var $lis = $('.results > li').hide();
//For each one checked
$('input:checked').each(function() {
$lis.filter('.' + $(this).attr('rel')).show();
});
});
});
With HTML like:
<div class="tags">
<label><input type="checkbox" rel="arts" /> Arts </label>
<label><input type="checkbox" rel="computers" /> Computers </label>
<label><input type="checkbox" rel="health" /> Health </label>
<label><input type="checkbox" rel="video-games" /> Video Games </label>
</div>
<ul class="results">
<li class="arts computers">Result 1</li>
<li class="video-games">Result 2</li>
<li class="computers health video-games">Result 3</li>
<li class="arts video-games">Result 4</li>
</ul>
I've tried it in IE, FF & Opera, but I don't get expected results. That is, the content is not being filtered upon clicking a checkbox? I'm trying to replicate something similar to this:
http://www.houseoffraser.co.uk/Jeans+for+Women/302,default,sc.html
Notice the accordian effect on the left side bar of the page. I'm not too worried about the accordian itself, it's the checkboxes function that I'm focusing on at the moment. On page load, all query results (some 1300 or so), are displayed to the user.
A user can then filter or refine the results by clicking on checkboxes. I'm assuming this is some kind of Jquery/Ajax script, but am not entirely sure? Am I on the right track?
Thanks in advance.

Answer 1

You mentioned in a comment that you're using jQuery 1.3
jQuery's delegate() method was introduced in 1.4.2, so won't be available. You'll have to use a later version of jQuery (any reason why you're using such an old version?).
If you open your developer console (F12 shortcut in Chrome), you should see an error saying that TypeError: Object [object Object] has no method 'delegate'
If you need to use jQuery 1.3, try:
$(function() {
$('div.tags').bind('change', function(e) {
var that = e.originalEvent.target;
if ($(that).is('input:checkbox')) {
var $lis = $('.results > li ').hide();
//For each one checked
$('input:checked ').each(function() {
$lis.filter('.' + $(that).attr('rel')).show();
});
}
});
});
Which you can see working here
​

Answer 2

$(document).ready(function () {
$('.results > li').hide();
$('div.tags').find('input:checkbox').live('click', function () {
$('.results > li').hide();
$('div.tags').find('input:checked').each(function () {
$('.results > li.' + $(this).attr('rel')).show();
});
});
}); ​
for live demo see this link: http://jsfiddle.net/nanoquantumtech/Ddnuh/

Answer 3

Try this once
$(function(){
$('div.tags').delegate('input:checkbox', 'change', function() {
var $lis = $('.results > li').hide();
//For each one checked
$('input[type="checked"]:checked').each(function() {
$lis.filter('.' + $(this).attr('rel')).show();
});
});
});