jQuery using checkboxes to hide/show content

I have 6 different checkboxes (example of one):

<input type="checkbox" class="navigationItem" onclick="showChapter(this)" value="1" checked="checked" >1

I have 6 different chapters (example of one):

<div id="chapter1"> </div>

And i need to write a simple jQuery to show/hide chapters depending on selected checkboxes.

Here is my jQuery:

$(document).ready(function(){
    if ($('.navigationItem').is(':checked')){
        $($("chapter") + $('.navigationItem').val()).show();
    } else {
        $($("chapter") + $('.navigationItem').val()).hide();
    }
});

However this does not work I have also tried to do it like this:

function showChapter(cb){
var x = cb.value;            
        if($('.navigationItem').is(':checked')){
            $("chapter"+x).show();
        } else {
            $("chapter"+x).hide();
        }            
}  

But this also does not work. I just started learning JavaScript and jQuery and any help to point me into the right direction would be very appreciated, thanks! :)