Filter Using Checkboxes w. Jquery
<p>I am trying to create checkbox filters that show or hide boxes on my pagebased on their id. I'm very new to jquery, but have been playing around with this for a while and cannot seem to get the boxes to hide / show. Please see my code below. Thanks!</p>

<p>Sport model</p>

<pre><code>class Sport(models.Model):
    name = models.CharField(max_length=128)
</code></pre>

<p>Snippet of HTML to filter</p>

<pre><code>{% for game in game_list %}
                            {% if game.sport = sport %}
                                &lt;div class="col-xs-12 col-sm-12 col-lg-12"&gt;
                                    &lt;section id="{{ sport.name }}" class="box pick-game"&gt;
                                        &lt;div class="box box-content"&gt;
                                            &lt;div class="game-bet-header"&gt;
                                                &lt;div class="row"&gt;
                                                    &lt;div class="col-md-3"&gt;
                                                         &lt;h4 class="game-date"&gt; {{ game.time|time }} - {{ game.time|date:"M-d" }}&lt;/h4&gt;
                                                    &lt;/div&gt;
                                                    &lt;div class="col-md-6"&gt;
                                                        &lt;h4 class="game-title"&gt;{{ game.team1 }} vs {{ game.team2 }} &lt;/h4&gt;
                                                    &lt;/div&gt;
                                                &lt;/div&gt;
                                            &lt;/div&gt;
</code></pre>

<p>HTML Checkboxes to Use as Filters</p>

<pre><code>&lt;div class="sport-sidebar"&gt;
            &lt;section class="sports-box"&gt;
                {% for sport in sports %}
                    &lt;div id="sport-filter" class="sport-name"&gt;
                        &lt;label for="filter-{{ sport.name }}"&gt;&lt;input type="checkbox" class="sport" value="{{ sport.name }}" id="filter-{{ sport.name }}"&gt;{{ sport.name }}&lt;/label&gt;
                    &lt;/div&gt;
                {% endfor %}
            &lt;/section&gt;
&lt;/div&gt;
</code></pre>

<p>Jquery</p>

<pre><code>$('#sport-filter input:checkbox').click(function() {
    $('#sport-filter input:checkbox:checked').each(function() {
        $("#" +$(this).val()).show()
    });
});
</code></pre>

<p>Please help provide suggestions to solve this problem! Thanks so much </p>

<p><strong>Updated Javascript on 9/20, but still not working</strong></p>

<p>Please see below for updated javascript. Initializing with .hide() is not working, but if I manually set the id of each sport to display: none in the CSS it does hide. This is leading me to believe that either .show and .hide are not working, or they are not correctly capturing my class. I also added a class to my checkbox in the javascript to distinguish it from the others.</p>

<pre><code>$("#mlb-pick").hide();
$("#nfl-pick").hide();


$(".sport-sidebar input[type=checkbox]").on('click', function() {
  var thisval =  $(this).val();
  if ($(this).prop('checked')){
      $('#' + thisval+"-pick").show();
    }
  else{
    $('#' + thisval).hide();
    }

});
</code></pre>

<p>Here's an example of how .each works in jquery</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function toggleChks() {
$("input[type=checkbox]").each(function(index, item) {
  console.log(index, item);
  if ($(item).prop('checked'))
    $(item).prop('checked', false);
  else
    $(item).prop('checked', true);
})
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;button onclick="toggleChks()"&gt;toggle&lt;/button&gt;
&lt;input type="checkbox" checked value="1"&gt;
&lt;input type="checkbox" checked value="2"&gt; 
&lt;input type="checkbox" checked value="3"&gt;
&lt;input type="checkbox" value="4"&gt;
&lt;input type="checkbox" value="5"&gt;
&lt;input type="checkbox" value="6"&gt;</code></pre>
</div>
</div>
</p>

javascript jquery python django filter