Question

我建立了一个小过滤器。根据您选中的复选框，它将显示针对一定数量的玩家和一定的游戏时间的棋盘游戏。首次加载和首次使用复选框时，它以我想要的方式工作。但是，只要我取消选中最后一个选中的复选框，以便再次取消选中所有复选框，棋盘游戏的列表就会完全消失，而不是再次显示未过滤的完整列表。

我试图通过将.reset类添加到每个棋盘游戏中来解决此问题，并使脚本至少显示具有该特定类的alll棋盘游戏/ div（即未选择其他任何复选框/类时）。不幸的是，这不起作用。顺便说一句，“重置”按钮是一个额外的选项，但是如果过滤器已修复，并且一旦再次取消选中所有复选框，则显示所有棋盘游戏就不需要。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <h3 align="center">Boardgamefilter</h3>

<form name="gamesettings">
<input type="checkbox" name="gamesetting" value="1p">1p<br />
<input type="checkbox" name="gamesetting" value="2p">2p<br />
<input type="checkbox" name="gamesetting" value="3p">3p<br />
<input type="checkbox" name="gamesetting" value="4p">4p<br />
<input type="checkbox" name="gamesetting" value="5p">5p<br />
<input type="checkbox" name="gamesetting" value="6plus">6plus<br />
<br />
<input type="checkbox" name="gamesetting" value="15m">15m<br />
<input type="checkbox" name="gamesetting" value="30m">30m<br />
<input type="checkbox" name="gamesetting" value="45m">45m<br />
<input type="checkbox" name="gamesetting" value="60m">60m<br />
<input type="checkbox" name="gamesetting" value="90m">90m<br />
<input type="checkbox" name="gamesetting" value="120mplus">120mplus
<br />
<br />
<input type="button" name="Un_CheckAll" value="Reset"
onClick="UnCheckAll(document.gamesettings.gamesetting)">
</form>

<br />
<br />

<div id="boardgames">
<div class="reset 1p 2p 15m 30m" style="display: block;">Boardgame A - 1p 2p 15m 30m</div>
<div class="reset 1p 2p 30m 45m" style="display: block;">Boardgame B - 1p 2p 30m 45m</div>
<div class="reset 2p 30m 60m" style="display: block;">Boardgame C - 2p 30m 60m</div>
</div>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">

    $('input[name=gamesetting]').change(function(){

        var arr = []
        $(":checkbox").each(function(){
           if($(this).is(":checked")){
             arr.push($(this).val())
           }
        })
        var vals = arr.join(".")
        var str = (".") + vals

        $('#boardgames div').hide();
        $('#boardgames div.reset' + (str)).show();

    })    

    function UnCheckAll(chk) {
        for (i = 0; i < chk.length; i++)
        chk[i].checked = false ;
        $('#boardgames div').show();
    }

</script>

</body>
</html>

在取消选中所有复选框之后，是否有人看到应该更改什么代码才能再次显示所有棋盘游戏？在此先感谢您的任何帮助。

Answer 1

您应该为空数组添加检查

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <h3 align="center">Boardgamefilter</h3>

<form name="gamesettings">
<input type="checkbox" name="gamesetting" value="1p">1p<br />
<input type="checkbox" name="gamesetting" value="2p">2p<br />
<input type="checkbox" name="gamesetting" value="3p">3p<br />
<input type="checkbox" name="gamesetting" value="4p">4p<br />
<input type="checkbox" name="gamesetting" value="5p">5p<br />
<input type="checkbox" name="gamesetting" value="6plus">6plus<br />
<br />
<input type="checkbox" name="gamesetting" value="15m">15m<br />
<input type="checkbox" name="gamesetting" value="30m">30m<br />
<input type="checkbox" name="gamesetting" value="45m">45m<br />
<input type="checkbox" name="gamesetting" value="60m">60m<br />
<input type="checkbox" name="gamesetting" value="90m">90m<br />
<input type="checkbox" name="gamesetting" value="120mplus">120mplus
<br />
<br />
<input type="button" name="Un_CheckAll" value="Reset"
onClick="UnCheckAll(document.gamesettings.gamesetting)">
</form>

<br />
<br />

<div id="boardgames">
<div class="reset 1p 2p 15m 30m" style="display: block;">Boardgame A - 1p 2p 15m 30m</div>
<div class="reset 1p 2p 30m 45m" style="display: block;">Boardgame B - 1p 2p 30m 45m</div>
<div class="reset 2p 30m 60m" style="display: block;">Boardgame C - 2p 30m 60m</div>
</div>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">

    $('input[name=gamesetting]').change(function(){

        var arr = []
        $(":checkbox").each(function(){
           if($(this).is(":checked")){
             arr.push($(this).val())
           }
        })
        var vals = arr.join(".")
        var str = (".") + vals

        $('#boardgames div').hide();
        if (arr.length) {
          $('#boardgames div.reset' + (str)).show();
        } else {
          $('#boardgames div.reset').show();
        }

    })    

    function UnCheckAll(chk) {
        for (i = 0; i < chk.length; i++)
        chk[i].checked = false ;
        $('#boardgames div').show();
    }

</script>

</body>
</html>

如果不再选中过滤器复选框，如何再次显示所有div？

1 个答案: