Multiple checkboxes to toggle related div

I've tried to look around other very similar questions but none seem to have a solution.

How would I go about achieving the following scenario:

Layout:

Checkbox 1 "Orange"  
Checkbox 2 "Apple"  
Checkbox 3 "Banana"  

Div 1 "Orange"  
Div 2 "Apple"  
Div 3 "Banana"  

When you load the page, all you can see is the checkboxes. When the user selects a checkbox, the corresponding div is displayed. If the user then selects another checkbox, the original div is hidden and the newly selected one is displayed.

I can only use a checkbox as it's for another purpose whereby checkbox is the desired option.

My code so far:

$(document).ready(function() {
    $('.toggle input[type="checkbox"]').on('change', function() {
        $('input[type="checkbox"]').not(this).prop('checked', false).change();
        var name = $(this).attr('name');
        if ($(this).attr("type") === "checkbox") {
            $(this).parent().siblings().removeClass("selected");
            $("#" + name).toggle(this.checked);
        }
        $(this).parent().toggleClass("selected");
    });
});