Filtering with checkboxes

Filtering with checkboxes

Hi,

I am setting up a site that will list a table of companies that are in the same vertical market. I wanted to be able to filter these easily by just selecting checkboxes.

In this example the company sells hardware. Two separate categories: Power Tools and Screwdrivers, each category can have X number of products, but there will never be more than a few to keep it simple.

Here is the html table:

<table border="1">
   <tr id="tr_1" class="customerline w_drills">
      <td>1. w_drills</td>
   </tr>
   <tr id="tr_2" class="customerline w_jackhammers s_philips">
      <td>2. w_jackhammers / s_philips</td>
   </tr>
   <tr id="tr_3" class="customerline s_philips">
      <td>3. s_philips</td>
   </tr>
</table>


And here is the javascript:

// <![CDATA[
var filters = [
    {'name': 'Power Tools','state': 'all','cssclass': 'p_all','options':
      [
         {'label': 'Drills','cssclass': 'w_drills'},
         {'label': 'Jackhammers','cssclass': 'w_jackhammers'},
      ]},
    {'name': 'Screwdrivers','state': 'all','cssclass': 's_all','options':
      [
         {'label': 'Philips','cssclass': 's_philips'},
         {'label': 'Flat','cssclass': 's_flat'},
      ]}
];
var html_filters = new Array;
for (filternum=0; filternum < filters.length; filternum++) {
    var html_filter = filters[filternum].name + ': ';
    html_filter += _checkbox({'label':'all','checked':  1,'cssclass': filters[filternum].cssclass,'onclick': 'showorhideoptions(\'' + filters[filternum].cssclass + '\')'});
    html_filter += '<span id="options_' + filters[filternum].cssclass + '">';
    var options = filters[filternum].options;
    for (optionnum=0; optionnum < options.length; optionnum++) {
        html_filter += _checkbox({'label':    options[optionnum].label,'checked':  1,'cssclass': options[optionnum].cssclass});
    }
    html_filter += '</span>';
    html_filters.push(html_filter);
}
document.write('<p class="filter">', html_filters.join('<br/>'), '</p>');
document.write('<p class="stats"></p>');
for (filternum=0; filternum < filters.length; filternum++) {
    showorhideoptions(filters[filternum].cssclass);
}
function _checkbox (args) {
    return '<input type="checkbox"'
        + 'name="' + args.cssclass + '"'
        + 'id="' + args.cssclass + '"'
        + (args.checked ? ' checked="checked"' : '')
        + 'onclick="'
            + (args.onclick ? args.onclick + ';' : '')
            + 'showorhideorders()"'
        + '> '
        + args.label
}
function showorhideoptions (cssclass) {
    var options = '#options_' + cssclass;
    if (_checked(cssclass)) {
        $(options).hide();
    } else {
        $(options).show();
    }
}
function _checked (cssclass) {
    return typeof($('#' + cssclass + ':checked').html()) == 'string';
}
function showorhideorders (restrictToId) {
    var base = 'tr.customerline';
    if (typeof(restrictToId) != 'undefined') {
       base += '#' + restrictToId;
    }
    var show = new Array;
    var hide = new Array;
    for (filternum = 0; filternum < filters.length; filternum++) {
        var cssclass = filters[filternum].cssclass;
        var checked = _checked(cssclass);
        if (!checked) {
            var options = filters[filternum].options;
            for (optionnum = 0; optionnum < options.length; optionnum++) {
                var cssclass = options[optionnum].cssclass;
                (_checked(cssclass) ? show : hide).push(cssclass);
            }
        }
    }
    $(base).show();
    for (i=0; i< show.length; i++) {
        $(base + '.' + show[i]).show();
    }   
    for (i=0; i< hide.length; i++) {
        $(base + '.' + hide[i]).hide();
    }

}
// ]]>


There is a demo here: http://www.whoisstuff.net/test3.php.

Now it works well except for one major flaw. Let's say a customer wants all shops that philips screwdrivers. I should get row 2 and 3. However, if jackhammers is no selected it wont show row 2.

I would like the code to act that if it find the variable it shows it regardless as to whether or not it is deselected in another category. So the check is always used as an include, but a deselect is not used an exclude.

Hope this makes sense. Please help...