Table filtering in jquery - a more elegant solution please -

I want to filter some rows from a table and am using classes to classify rows.

The code below enables me to show and hide the row data classified as "QUO" and "CAL" (eventually there may be other categories.)

I point to a more elegant solution, so I

Thank you!

  & lt ;! DOCTYPE html public "- // W3C // DTT XHTML 1.0 Transcription // n "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  gt; & lt; head & gt; Title & gt; Head Unfollow & lt; / title & gt; & lt; style & gt; & lt; / style & gt; & lt; script src = "javascript / jquery-1.4.2.min.js" type = "text / javascript" & Gt; & lt; / script & gt; script type = "text / javascript" & gt; $ (document) .ready (function () {$ ("# toggle_ac_cal"). Click (function () {Var checked_status = this.ch ecked; if (check_status == true) {$ (".ac_cal"). Show ()} and {$ (".ac_cal"). Hide ()}}}) $ (" # Toggle_ac_quo "). Click (function () {var check_status = this.check, if (check_stats == true) {$ (". Ac_quo "). Show ()} and {$ (". Ac_quo "). Hide ()}};}); & lt; / script & gt; & lt; / head & gt; & lt; body & gt; ; & Lt; input type = "checkbox" id = "toggle_ac_cal" check = "check" /> CL 
 input type = "checkbox" id = "toggle_ac_quo" check = "check" /> QUO 
 Table & gt; & lt; tbody & gt; & lt; tr class = "ac_cal" & gt; & lt; td & gt; cal & lt; / TD & gt; & lt; td> October 10 & lt; / td & gt; & lt; td> John Barnes & lt; / td & gt; & lt; / tr & gt; & lt; Tr class = "ac_cal"> lt; td> caly  & lt; td> 10 oct October & lt; / td & gt; & lt; td & gt; Neil Burton & lt; / td & gt; & lt; / t R & gt; & lt; tr class = "ac_quo" & gt; & lt; TD & gt; Q & lt; & gt; & lt; td & gt; October 11 & lt; / td & gt; Lt; td & gt; Neil Armstrong & lt; / td> & lt; / TR & gt; & lt; / tbody & gt; & lt; / table & gt; & lt; / body & gt; & Lt ; / Html & gt;  

You can reduce your code (markup to Without changing):

  $ ("[id ^ = 'Toggle _'"). Click (function () {$ ("." + This.id.replace ('toggle _', '')) Toggle (this check);});  

However, if you have given a square instead of your toggle element, such as .toggle you can clear the original selector in such a way:

  $ (". Toggle") (function () {$ ("." + This.id.replace ('toggle _', '')) Toggle (this.checked) ;});  

You can also give them a square and use the value as the target class, such as:

  & lt; Input type = "checkbox" class = "toggle" value = "ACCCL" />  

Then your jquery bus is short and simple:

  $ (". Toggle"). Click (function () {$ ("" + This.value) Toggle (this.checked);});