Check if multiple checkbox id's match multiple span text

I am using a set of checkboxes with labels to control what li's are visible in a ul, and am trying to target each li's span class to select them. However, instead of iterating over each checkbox, it is instead applying the code on the first checked element.

My code: (assumed there's a form tag surrounding these inputs)

    <input type="checkbox" id="1"><label for="1"></label>
    <input type="checkbox" id="2"><label for="2"></label>
    <input type="checkbox" id="3"><label for="3"></label>
    <input type="checkbox" id="4"><label for="4"></label>
    <input type="submit" value="submit">


<ul class="list-unstyled">
   <li><span class="platform">1</span></li>
   <li><span class="platform">2</span></li>
   <li><span class="platform">3</span></li>
   <li><span class="platform">4</span></li>
</ul>

$('form').submit(function(){
    event.preventDefault();
    $('.list-unstyled').each(function(){
        $(this).find('li').each(function(){
            if ($('input[type="checkbox"]:checked').attr('id') != $(this).find('.platform').text()){
                $(this).hide(200);
            }   
        });
    });

 });

Here's a JSFiddle. What I would like is that if I have multiple checkboxes selected, then only those with the same span text are shown after hitting submit.