Filter Using Checkboxes w. Jquery

Question

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!

Sport model

class Sport(models.Model):
    name = models.CharField(max_length=128)

Snippet of HTML to filter

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

HTML Checkboxes to Use as Filters

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

Jquery

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

Please help provide suggestions to solve this problem! Thanks so much

Updated Javascript on 9/20, but still not working

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.

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

});

Answer 1

Here's a working one with your example, you've had to put the "id" for the sections, or in other case, change the jquery selector for it's class.

Also you have to set the click action for the input checkbox elements.

Hope this helps.

//initialize state
$("#mlb").hide();
$("#nfl").hide();


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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sport-filter" class="mlb">
     <label for="mlb-filter"><input type="checkbox" value="mlb" id="mlb-filter">mlb</label>
</div>
 <div id="sport-filter" class="nfl">
     <label for="nfl-filter"><input type="checkbox" value="nfl" id="nfl-filter">nfl</label>
</div>

<section class=mlb id="mlb">
  <p>
    Hey
  </p>
</section>
<section class=nfl id="nfl">
  <p>
    Hey 2
  </p>
</section>

Answer 2

Here's an example of how .each works in jquery

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="toggleChks()">toggle</button>
<input type="checkbox" checked value="1">
<input type="checkbox" checked value="2"> 
<input type="checkbox" checked value="3">
<input type="checkbox" value="4">
<input type="checkbox" value="5">
<input type="checkbox" value="6">