Question

I’m running into a bit of a problem on a site I’m trying to build. On one side of the site there is a ‘filter’ that allows users to check boxes in a list which will effect the results of their searches. I’m a newbie to jQuery but I’ve managed to piece together enough code to make this work… mostly

Here’s the code I have so far:

/// Makes checkboxes in the filter add and remove the proper class based on whether they're checked or not
$('.filterlist input:checkbox').click(function checkboxes(){
  $thislist = $(this).closest('.filterlist li > ul');
  $checkboxes = $thislist.closest('li > input:checkbox').serializeArray();
  if($checkboxes.length < 1) {
     $(this).closest('ul.filterlist > li').removeClass('itemselected');
  }
  else if($checkboxes.length > 0) {
     $(this).closest('ul.filterlist > li').addClass('itemselected');
  }
});

In my css ‘itemselected’ is the class I’m trying to add. The problem is that I have more than one list of checkboxes under ‘.filterlist’. As I check the checkboxes in the first list it adds the class properly, and if I remove all of the ones in that list it removes the class properly – unless there are any checked in the second list.

This is because I’m only using one Array, but I can’t figure out how to make it create a different array for each of the lists such that even if some are checked in the first list it will still remove the class from the li in the second list if none are checked there, or vice versa.

Sorry this is such a long question, I was trying to be specific.

Thanks ahead of time for any answers! =]

Answer 1

something like this??

$(document).ready(function(){ 
 $('ul.filterlist input:checkbox').click(function () {
  var ul = $(this).parent().parent();
  if ( ul.find("input:checked").length == 0 ) {
   ul.parent().removeClass('itemselected');
  } else {
   ul.parent().addClass('itemselected');
  }
 });
});