Use "this" to simplify code (simple jQuery)

Question

I have a bunch of table rows that I'm hiding/showing using checkboxes and jQuery. The checkboxes have id="game-XYZ" and the rows have class="XYZ". Currently, I'm using the seriously bloated jQuery:

$(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(); }
      });
});

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

For some more details, here's the HTML, somewhat simplified:

<ul>
    <li><input id="game-9man"   type="checkbox" checked="checked"> 9man</li>
    <li><input id="game-18man"  type="checkbox" checked="checked"> 18man</li>
    <li><input id="game-45man"  type="checkbox" checked="checked"> 45man</li>
    <li><input id="game-90man"  type="checkbox" checked="checked"> 90man</li>
    <li><input id="game-180man" type="checkbox" checked="checked"> 180man</li>
    <li><input id="game-MTT"    type="checkbox" checked="checked"> MTT</li>
    <li><input id="game-any"    type="checkbox" checked="checked"> Any</li>
</ul>

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

Thanks! (Some guidance towards some resources explaining this would also be highly appreciated!)

Make sure your ID's are unique in your DOM, otherwise some browsers may not handle it properly. — dotariel, Nov 02 '10 at 20:01

score 10 · Accepted Answer · answered Nov 02 '10 at 19:59

10

Using an attribute-starts-with selector (^=) on id, this.id to get the class, and .toggle(bool), you can shorten all your code down to this:

$(function(){
  $("input[id^='game-']").change(function() {
    $("."+this.id.replace('game-','')).toggle(this.checked);
  }).change();
});

Note I used .change() here, which is more appropriate for a checkbox, and won't flip the initial state when it runs.

answered Nov 02 '10 at 19:59

Nick Craver

623,446
136
1,297
1,155

+1 I like the usage of `this.checked`. By the way, are the single quotes around the wildcard selector for the `id` necessary ? – Valentin Flachsel Nov 02 '10 at 20:03
@FreekOne - Not in all cases, only when there are special characters, but leaving them on there for clarity in this case. – Nick Craver Nov 02 '10 at 20:05
Perfect. Thanks for the explanations and the references! – christina Nov 02 '10 at 20:08
@Nick - I never use them myself, but then again I never use colons or dots in my `id` s. I thought that maybe there was more to their usage. Thanks for clarifying ! :) – Valentin Flachsel Nov 02 '10 at 20:09

score 6 · Answer 2 · answered Nov 02 '10 at 19:58

6

If I understood your code correctly, this should do what you want:

$(document).ready(function() {    
    $('ul input[id^=game]').change(function() {
        var $el = $('.'+this.id.split('-')[1]);
        if(this.checked) {
            $el.show();
        } else {
            $el.hide();
        }
    }).change();
});

Or, even more condensed but borderline unreadable:

$(document).ready(function() {    
    $('ul input[id^=game]').change(function() {
        $('.'+this.id.split('-')[1])[this.checked ? "show" : "hide"]();
    }).change();
});

;)

answered Nov 02 '10 at 19:58

Tatu Ulmanen

123,288
34
187
185

+1 for `"show" : "hide"]()`. Didn't ever try/know that was possible in jquery :) – Sarfraz Nov 02 '10 at 20:02
Yes that works! But for some reason it unchecks all the boxes initially (so none of the boxes are checks, but all the class are visible)... any idea why it'd do that? – christina Nov 02 '10 at 20:04
@Sarfraz: jQuery is just a framework on top of Javascript, don't forget. If you know Javascript, jQuery becomes a much more powerful tool. – Robusto Nov 02 '10 at 20:04
@Sarfraz - that's not jQuery specific, that's basic JS bracket notation. – Nick Craver Nov 02 '10 at 20:06

Use "this" to simplify code (simple jQuery)

2 Answers2

Linked