jquery checkbox if statement not working anymore

letterChr, numberChr, and symbolChr were originally designated as ids but had to update them recently to a class (which I did on both the html and javascript) and while every variation works the if statement to set the global variable to 4 doesn't and it instead defaults to 3. any help would be appreciated.

the javascript code

var letterChr = $('.letters')
    var numberChr = $('.numbers')
    var symbolsChr = $('.characters')

else if(letterChr.is(':checked') && numberChr.is(':not(:checked)') && symbolsChr.is(':not(:checked)'))
        {
            chooser = 3
            console.log('checked 3')

        } else if(letterChr.is(':checked') && numberChr.is(':not(:checked)') && symbolsChr.is(':checked'))
        {
            chooser = 4
            console.log('checked 4')

        }

the html code

<ul class="list-group list-group-flush">
              <li class="list-group-item">
                    <label for="letters">Letters</label>
                    <input type="checkbox" class="letters">
                </li>
              <li class="list-group-item">
                <label for="numbers">Numbers</label>
                <input type="checkbox" class="numbers">
              </li>
              <li class="list-group-item">
                <label for="characters">Characters</label>
                <input type="checkbox" class="characters">
              </li>
            </ul>