Filter mit Checkboxen w. Jquery

Question

Ich versuche, Kontrollkästchen-Filter zu erstellen, die auf meiner Seite Boxen auf ihrer ID anzeigen oder ausblenden. Ich bin sehr neu in jQuery, aber ich habe eine Weile damit herumgespielt und kann die Boxen nicht zum verstecken/anzeigen bringen. Bitte beachten Sie meinen Code unten. Vielen Dank!

Sport Modell

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

Snippet von HTML zu filtern

{% 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 Ankreuzfelder zu verwenden als Filter

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

Bitte helfen Sie mit Vorschlägen zur Lösung dieses Problems! Vielen Dank

Aktualisiert Javascript auf 9/20, aber immer noch nicht funktioniert

Bitte siehe unten aktualisiert Javascript. Das Initialisieren mit .hide() funktioniert nicht, aber wenn ich die ID jedes Sports manuell anzeige, wird nichts im CSS angezeigt. Das lässt mich glauben, dass .show und .hide nicht funktionieren oder dass sie meine Klasse nicht korrekt erfassen. Ich habe meiner Checkbox im JavaScript auch eine Klasse hinzugefügt, um sie von den anderen zu unterscheiden.

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

Hier ist ein Beispiel dafür, wie .each

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">

Answer 2

Hier ist eine Arbeitsgruppe ein mit Ihrem Beispiel in jquery funktioniert, können Sie die "id" für die habe zu setzen Abschnitte, oder in anderen Fällen, ändern Sie den Jquery-Selektor für seine Klasse.

Sie müssen auch die Klickaktion für die Eingabe-Kontrollkästchen-Elemente festlegen.

Hoffe, das hilft.

//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>