使用复选框过滤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>