Using jquery to load new div in page

[cjay175]

Hi there I'm trying to use jquery to load some content on a page but cannot seem to find anything through google.

I have about 10 checkboxes, once 4 are selected I want to get their ids, than load 4 divs with textareas depending on the ids of the checked checkboxes.

Example:

<div id="page_select">
<input type="checkbox" class="page_choose" name="option1" id="option1" value="Home" /> Home
<input type="checkbox" class="page_choose" name="option2" id="option2" value="About" /> About</div>

Jquery to get the id of the checked checkboxes:

$(document).ready(function() {
    $('#reload_1').click(function() {
        var names = [];
        $('#page_select input:checked').each(function() {
            names.push(this.name);
        });
        $("#page_select :checked").each(function() {
	                    alert("value = " + $(this).attr("id")); 
});
});
});

Now from this point I would like jquery to pass the id of the checkbox and load the corresponding textarea

<textarea name="home_main" id="option1" cols="60" rows="8"></textarea>

The reason I don't want to load everything right away is because I have 10 checkboxes and 10 textareas and the textareas have ckeditor attached, so it would load slow.

I assume it would be something with using $("#test_div").load to reload just that part of the page and not the whole page, but I dont know how to pass the variable and where to put the div that I need loaded after.

Thanks and if this doesnt make any sense I can tryt o explain it again