Jquery selectors - filtering ASP.NET gridview

Question

I've got a gridview and some checkbox controls, with the idea that only the rows with the corresponding checkboxes are shown.

I've composed this mess of JQuery/javascript which actually does work but offends my eyes, and performs terribly. Is there are a simpler and/or faster way of using the checkbox names to filter by the column text?

<script type="text/javascript">
    $(document).ready(function() {
    $('.Red input:checkbox').click(function(event) {
          if (this.checked) {
              jQuery(".EntriesGrid tr:hidden .Colour:contains('Red')").parent().show();
          }
          if (!this.checked) {
              jQuery(".EntriesGrid tr:visible .Colour:contains('Red')").parent().hide();
          }
      });
      $('.Green input:checkbox').click(function(event) {
          if (this.checked) {
              jQuery(".EntriesGrid tr:hidden .Colour:contains('Green')").parent().show();
          }
          if (!this.checked) {
              jQuery(".EntriesGrid tr:visible .Colour:contains('Green')").parent().hide();
          }
      });
      $('.Blue input:checkbox').click(function(event) {
          if (this.checked) {
              jQuery(".EntriesGrid tr:hidden .Colour:contains('Blue')").parent().show();
          }
          if (!this.checked) {
              jQuery(".EntriesGrid tr:visible .Colour:contains('Blue')").parent().hide();
          }
      });
  });
</script>

<span id="filtercheckboxes">
    <asp:CheckBox ID="Red" runat="server" CssClass="Red" Width="5px" Checked="True" />
    <asp:Label runat="server" Text="Red" AssociatedControlID="Red" ID="RedLabel"
        CssClass="RedLabel" />
    <asp:CheckBox ID="Green" runat="server" CssClass="Green" Width="5px" Checked="True" />
    <asp:Label runat="server" Text="Green" AssociatedControlID="Green" ID="GreenLabel"
        CssClass="GreenLabel" />
    <asp:CheckBox ID="Blue" runat="server" CssClass="Blue" Width="5px" Checked="True" />
    <asp:Label runat="server" Text="Blue" AssociatedControlID="Blue" ID="BlueLabel"
        CssClass="BlueLabel" />
</span>

The HTML output from the ASP.NET gridview looks like this:

<div class="AspNet-GridView" id="ctl00_ContentPlaceHolder1_GridView1">
    <table summary="" class="EntriesGrid">
     <thead>
      <tr class="headerrow">
       <th scope="col">header</th>
       <th scope="col">header</th>
       <th class="Colour" scope="col">header</th>
       <th scope="col">header</th>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>data</td>
       <td>data</td>
       <td class="Colour">Red</td>
       <td>data</td>
      </tr>
     </tbody>
    </table>
</div>

(This is dramatically simplified from the original, in the hope of making it easy to understand. The filtering does actually work in the original too, it's just slow and ugly...)

Answer 1

One thing that slows it down is the way that you have defined your selectors:

$('.Blue input:checkbox')

Because you are searching by class jQuery pretty much has to go through every item on the page first. If however you specify an ID then jQuery can skip most of the page and concentrate on a specific DOM element.

So a better selector would be:

$('#ctl00_ContentPlaceHolder1_GridView1 .Blue input:checkbox')

Of course this has the problem of getting the controls ID but if the JavaScript is on the same page you could user somethin like this:

$('#<% GridView1.ClientID %> .Blue input:checkbox')