How to show all divs again when no filter-checkboxes are checked anymore?

11
May 18, 2019, at 5:00 PM

I've built a little filter. Depending on the checkboxes you check, it will show boardgames for a certain amount of players and a certain amount of playing time. On first load and first use of the checkboxes, it works the way I want to. But as soon as I uncheck the last checked checkbox so that all of them are unchecked again, the list of boardgames disappears completely instead of the full, unfiltered list being shown again.

I tried to counter this problem by adding the class .reset to each boardgame and make the script at least show alll boardgames/divs with this particular class (that is when no other additional checkboxes/classes are selected). Unfortunately, this doesn't work. The reset button is an extra option by the way, but shouldn't be needed if the filter gets fixed and shows all boardgames as soon as all checkboxes get unchecked again.

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

Does anyone see what code should be changed in order to show all boardgames again after all checkboxes get unchecked again? Any help would be greatly appreciated, thanks in advance.

Answer 1

you should add check for the empty array

<!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>
READ ALSO
Text is not appearing after the second insert

Text is not appearing after the second insert

these code is working except that for the second or subsequent insert, the message 'Order added' is not appearingSecondly, after I removed everything using pop and click to view current order, the message 'No customer orders at the moment

21
Find min/max values from object array exlcuding infinity

Find min/max values from object array exlcuding infinity

I have an array of objects where I want to find the min/max value of a property in each objectI currently have a working method to find the min, however I am struggling with the max, if the value is Infinity I want to ignore it

43
How to sort array of objects by day, if object can includes 2 or more timestamp, if no same date - create new property &amp; set to null

How to sort array of objects by day, if object can includes 2 or more timestamp, if no same date - create new property & set to null

I have array of objects where each element has 2 or more unique keys 'datetime' and also i have data that belongs to the each datetimeI need sort by same date(by day), if no date we should set value to null

18
loop inner object array in angular without having iteration of outer array [on hold]

loop inner object array in angular without having iteration of outer array [on hold]

I am web service which return nested object arrayIn my angular example, I have iterated the inner array ie currencies in users

16