If/else event (changing file path) not changing when checkbox checked...

On my website, a user chooses 2 rhythms from among 100 different choices (each of which has a unique id. In the image above, as you can see, the user has selected rhythm 2.5 and rhythm 5.8. There is an audio file associated with each rhythm, which can be played by clicking the play button. Actually, there are TWO audio files associated with each rhythm -- a straight version and a swing version. When the user clicks the "swing it" checkbox, I want the swing version to play. Otherwise, I want the straight version to play. The names of the straight and swing audio files are identical ("2.5.mp3", for example), but the straight version is called at "audio/2.5.mp3" and the swing version is called at "audio/swing/2.5.mp3".

I've looked at many SO posts, but my code's not working. I would love some help! Here's my HTML:

<div class="playRow">               
    <div class="rhythms_AandB">
        <div class="currentSelection">
            <div class="playFeatured"><audio id="playA" preload='none'></audio>
                <button class="featuredAudio" onclick="document.getElementById('playA').play()">&#x25b6;</button></div> 
            <div class="selectedLabelA" id="currentLabelA">A</div>
            <div class="selectedRhythm currentRhythm_A" id="currentRhythm_A"></div>
        </div>

        <div class="currentSelection">
            <div class="playFeatured"><audio id="playB" preload='none'></audio>
                <button class="featuredAudio" onclick="document.getElementById('playB').play()">&#x25b6;</button></div> 
            <div class="selectedLabelB" id="currentLabelB">B</div>
            <div class="selectedRhythm currentRhythm_B" id="currentRhythm_B"></div>
        </div>
</div>  
<div class="swingRow">
        <input type="checkbox" name="swingBox" id="swingBox" class="css-checkbox" /><label for="swingBox" class="css-label">Swing it <a href="" id="swing-tooltip" data-tipped-options="position: 'bottom'">(?)</a></label>
        </div>  
</div>

And here is my js:

$(document).ready(function() {  
var activeRhythmA = document.getElementById('currentLabelA');
var activeRhythmB = document.getElementById('currentLabelB');
function swingIt() {
    if(document.getElementById('swingBox').checked) {
    $('#playA').html("<source src='audio/swing/" + activeRhythmA + ".mp3' type='audio/mpeg' /><source src='audio/swing/" + activeRhythmA + ".ogg' type='audio/ogg' />"); $('#playA').load();
    $('#playB').html("<source src='audio/swing/" + activeRhythmB + ".mp3' type='audio/mpeg' /><source src='audio/swing/" + activeRhythmB + ".ogg' type='audio/ogg' />"); $('#playB').load();
    }
    else {
    $('#playA').html("<source src='audio/" + activeRhythmA + ".mp3' type='audio/mpeg' /><source src='audio/" + activeRhythmA + ".ogg' type='audio/ogg' />"); $('#playA').load();
    $('#playB').html("<source src='audio/" + activeRhythmB + ".mp3' type='audio/mpeg' /><source src='audio/" + activeRhythmB + ".ogg' type='audio/ogg' />"); $('#playB').load();    
    }
};
});