Use "this" to simplify code (simple jQuery)
<p>I have a bunch of table rows that I'm hiding/showing using checkboxes and jQuery. The checkboxes have <code>id="game-XYZ"</code> and the rows have <code>class="XYZ"</code>. Currently, I'm using the seriously bloated jQuery:</p>

<pre><code>$(document).ready(function(){
    if ($("#game-9man").is(":checked")){ $(".9man").show(); }
    else{ $(".9man").hide(); }
    $("#game-9man").click(function(){       
        if ($("#game-9man").is(":checked")){ $(".9man").show(); }
        else{ $(".9man").hide(); }
      });

    if ($("#game-18man").is(":checked")){ $(".18man").show(); }
    else{ $(".18man").hide(); }
    $("#game-18man").click(function(){       
        if ($("#game-18man").is(":checked")){ $(".18man").show(); }
        else{ $(".18man").hide(); }
      });

    if ($("#game-45man").is(":checked")){ $(".45man").show(); }
    else{ $(".45man").hide(); }
    $("#game-45man").click(function(){       
        if ($("#game-45man").is(":checked")){ $(".45man").show(); }
        else{ $(".45man").hide(); }
      });

    if ($("#game-90man").is(":checked")){ $(".90man").show(); }
    else{ $(".90man").hide(); }
    $("#game-90man").click(function(){       
        if ($("#game-90man").is(":checked")){ $(".90man").show(); }
        else{ $(".90man").hide(); }
      });

    if ($("#game-180man").is(":checked")){ $(".180man").show(); }
    else{ $(".180man").hide(); }
    $("#game-180man").click(function(){       
        if ($("#game-180man").is(":checked")){ $(".180man").show(); }
        else{ $(".180man").hide(); }
      });

    if ($("#game-mtt").is(":checked")){ $(".mtt").show(); }
    else{ $(".mtt").hide(); }
    $("#game-mtt").click(function(){       
        if ($("#game-mtt").is(":checked")){ $(".mtt").show(); }
        else{ $(".mtt").hide(); }
      });

    if ($("#game-any").is(":checked")){ $(".any").show(); }
    else{ $(".any").hide(); }
    $("#game-any").click(function(){       
        if ($("#game-any").is(":checked")){ $(".any").show(); }
        else{ $(".any").hide(); }
      });
});
</code></pre>

<p>I'm sure there's some easy way to simplify the code using <code>this</code>, but I'm not exactly sure how to do it. I'd really appreciate any light someone could shed on this! (Pun intended. :) )</p>

<p>For some more details, here's the HTML, somewhat simplified:</p>

<pre><code>&lt;ul&gt;
    &lt;li&gt;&lt;input id="game-9man"   type="checkbox" checked="checked"&gt; 9man&lt;/li&gt;
    &lt;li&gt;&lt;input id="game-18man"  type="checkbox" checked="checked"&gt; 18man&lt;/li&gt;
    &lt;li&gt;&lt;input id="game-45man"  type="checkbox" checked="checked"&gt; 45man&lt;/li&gt;
    &lt;li&gt;&lt;input id="game-90man"  type="checkbox" checked="checked"&gt; 90man&lt;/li&gt;
    &lt;li&gt;&lt;input id="game-180man" type="checkbox" checked="checked"&gt; 180man&lt;/li&gt;
    &lt;li&gt;&lt;input id="game-MTT"    type="checkbox" checked="checked"&gt; MTT&lt;/li&gt;
    &lt;li&gt;&lt;input id="game-any"    type="checkbox" checked="checked"&gt; Any&lt;/li&gt;
&lt;/ul&gt;

&lt;table&gt; 
    &lt;tr class="45man 90man any liveplay admin" id="90man"&gt;
        &lt;td&gt;11/01/2010&lt;/td&gt;
        &lt;td&gt;&lt;h4&gt;&lt;a href="#"&gt;ABC&lt;/a&gt;&lt;/h4&gt;&lt;/td&gt;
        &lt;td&gt;&lt;a href="#" rel="tag"&gt;45man&lt;/a&gt;&lt;/td&gt;
        &lt;td&gt;admin&lt;/td&gt;
        &lt;td&gt;&lt;a href="#" rel="tag"&gt;Any&lt;/a&gt;&lt;/td&gt;
        &lt;td&gt;Length: 1&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="45man 90man any liveplay admin" id="90man"&gt;
        &lt;td&gt;11/01/2010&lt;/td&gt;
        &lt;td&gt;&lt;h4&gt;&lt;a href="#"&gt;ABC&lt;/a&gt;&lt;/h4&gt;&lt;/td&gt;
        &lt;td&gt;&lt;a href="#" rel="tag"&gt;45man&lt;/a&gt;&lt;/td&gt;
        &lt;td&gt;admin&lt;/td&gt;
        &lt;td&gt;&lt;a href="#" rel="tag"&gt;Any&lt;/a&gt;&lt;/td&gt;
        &lt;td&gt;Length: 1&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="45man 90man any liveplay admin" id="90man"&gt;
        &lt;td&gt;11/01/2010&lt;/td&gt;
        &lt;td&gt;&lt;h4&gt;&lt;a href="#"&gt;ABC&lt;/a&gt;&lt;/h4&gt;&lt;/td&gt;
        &lt;td&gt;&lt;a href="#" rel="tag"&gt;45man&lt;/a&gt;&lt;/td&gt;
        &lt;td&gt;admin&lt;/td&gt;
        &lt;td&gt;&lt;a href="#" rel="tag"&gt;Any&lt;/a&gt;&lt;/td&gt;
        &lt;td&gt;Length: 1&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="45man 90man any liveplay admin" id="90man"&gt;
        &lt;td&gt;11/01/2010&lt;/td&gt;
        &lt;td&gt;&lt;h4&gt;&lt;a href="#"&gt;ABC&lt;/a&gt;&lt;/h4&gt;&lt;/td&gt;
        &lt;td&gt;&lt;a href="#" rel="tag"&gt;45man&lt;/a&gt;&lt;/td&gt;
        &lt;td&gt;admin&lt;/td&gt;
        &lt;td&gt;&lt;a href="#" rel="tag"&gt;Any&lt;/a&gt;&lt;/td&gt;
        &lt;td&gt;Length: 1&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>Thanks! (Some guidance towards some resources explaining <code>this</code> would also be highly appreciated!) </p>
