I can't see why the code doesn't work. About Jquery and checkboxes

I can't see why the code doesn't work. About Jquery and checkboxes

Hello;

AAAAAHHHH!!! I have been staring at screen for past 2 hours and can't find out why Example A works and Eaxmple B doesn't! This is what they are supposed to do. Thank you.

Example A (works):
  1. <ul id="filters">
        <li>
            <input type="checkbox" value="categorya" id="filter-categorya" />
            <label for="filter-categorya">Category A</label>
        </li>
        <li>
            <input type="checkbox" value="categoryb" id="filter-categoryb" />
            <label for="filter-categoryb">Category B</label>
        </li>
    </ul>











  4. <div class="categorya categoryb">A, B</div>
    <div class="categorya">A</div>
    <div class="categorya">A</div>
    <div class="categorya">A</div>
    <div class="categoryb">B</div>
    <div class="categoryb">B</div>
    <div class="categoryb">B</div>









Example B (Doesn't work, shows wrong results):

  1. <ul id="filters">
        <li>
            <input type="checkbox" value="category1" id="filter-category1" />
            <label for="filter-category1">Category 1</label>
        </li>
        <li>
            <input type="checkbox" value="category2" id="filter-category2" />
            <label for="filter-category2">Category 2</label>
        </li>
         <li>
            <input type="checkbox" value="category3" id="filter-category3" />
            <label for="filter-category3">Category 3</label>
        </li>
    </ul>














  3. <div class="category1">1</div>
    <div class="category1">1</div>
    <div class="category1">1</div>
    <div class="category1 category2">2</div>
    <div class="category1 category2">2</div>
    <div class="category1 category2">2</div>
    <div class="category1 category2 category3">3</div>







And this is the Javascript they both share:
  1. <script>
    $('input').click(function() {
        var category = $(this).val();
       
        var matchedItems = $('.' + category).each(function () {
            var anyChecked = false;
            var classArray = this.className.split(/\s+/);
           
            for(idx in classArray)
            {
                if ($('#filter-' + classArray[idx]).is(":checked"))
                {
                    anyChecked = true;
                    break;
                }
            }
           
            if (! anyChecked) $(this).hide();
            else $(this).show();
           
        });

    });</script>