使用復選框過濾w。 jQuery的

Question

我正在嘗試創建復選框過濾器，以根據其ID在頁面上顯示或隱藏框。 我對jquery還是很陌生，但是已經玩了一段時間，似乎無法隱藏/顯示框。 請在下面查看我的代碼。 謝謝！

運動模型

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

要過濾的HTML代碼段

{% 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復選框用作過濾器

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

請幫助提供解決此問題的建議！ 非常感謝

在9/20更新了Javascript，但仍然無法正常工作

請參閱下面的更新的javascript。 使用.hide（）進行初始化無法正常工作，但是如果我手動設置要顯示的每種運動的ID：CSS中的任何一項都不會隱藏。 這使我相信.show和.hide無法正常工作，或者它們無法正確捕獲我的課程。 我還在javascript的復選框中添加了一個類，以區別於其他類。

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

這是.each在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"> 

Answer 2

這是一個適合您的示例的示例，您必須在各節中放置“ id”，否則，請更改其類的jquery選擇器。

另外，您還必須為輸入復選框元素設置單擊動作。

希望這可以幫助。

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