Filtering checkboxes to show their classes doesn't work

CHECKBOXES:

                <div class="categhead">
                    <p>Ranking</p>
                </div>
                <div class="categsort">
                    <input type="checkbox" id="tagchallenger" value="challenger">
                    <label for="tagchallenger">Challenger</label>
                </div>

                <div class="categsort">
                    <input type="checkbox" id="tagmaster" value="master">
                    <label for="tagmaster">Master | Diamond</label>
                </div>
                <div class="categsort">
                    <input type="checkbox" id="tagplat" value="plat">
                    <label for="tagplat">Platinum | Gold</label>
                </div>

                <div class="categsort">
                    <input type="checkbox" id="tagsilver" value="silver">
                    <label for="tagsilver">Silver | Bronze</label>
                </div>

JAVASCRIPT:

                <script type="text/javascript">

                [].forEach.call(document.querySelectorAll('.hide-checkbox'), function(element) {
                    element.style.display = 'none';
                });
                var streameach = $('.streampic .row .col-md-4');

                function updateContentVisibility(){
                    var checked = $('#filters :checkbox:checked');
                    if(checked.length){
                        streameach.hide();
                        checked.each(function() {

                            $("." + $(this).val()).show();
                        });

                    } else {
                        streameach.show();
                    }
                }

                $('#filters :checkbox').click(updateContentVisibility);
                updateContentVisibility();


                </script>

Basically, this is how it should go: The page loads (no checkboxes checked), all classes (tags) should show. When atleast 1 checkbox is checked, every class but the checked classes should hide.
Example: no checkboxes checked -> challenger, master, plat and silver classes should show.
master checked -> master class should show, the others should hide.
master and silver checked -> master AND silver should show, others should hide.

What happens now: When nothing checked, shows all (supposed to happen). When somethings selected, also shows all (not supposed to happen).

Need help thanks!

KEEP IN MIND: The value of a checkbox reacts on the class with the same name, though the classes are not written like , they're added using JavaScript with .addClass('e.g. challenger').
This might have an impact(?)