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中运行的示例

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这是一个与你的榜样合作的人，你必须把这个＆＃34; id＆＃34;对于这些部分，或者在其他情况下，更改它的类的jquery选择器。

此外，您还必须为输入复选框元素设置单击操作。

希望这有帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

使用复选框过滤w。 Jquery的

2 个答案: