Execute complex javascript/jquery/json from a html checkbox

Question

OK so I am hopping this is a simple issue that I am over complicating things...

So I have a complex json/jQuery function (3000 lines) that builds a DOM tree that resides in called js file that has a lot of other on page functions built in. This is called onload back to the page to do some realtime client side processing.

Right now the DOM tree is called using <div id="tree"></div> function that calls:

<style type="text/css" src="css/kmltree.css
<script src="css/kmltree.min.js"></script>
<script src="source/extensions.pack.js"></script>
<script type="text/javascript" src="source/gearth_public_d4_multi_son.js"></script>

This last call is the main function that calls:

    var tree1 = kmltree({
    url: 'kml/ca_son.kml',
    gex: gex,
    mapElement: $('#geeMap'),
    element: $('#tree')
});

tree.load();

For each tree you change the variable to tree1, tree2...

What I need to do is to fire each tree using a checkbox, not onload as the page loads too slow when all the trees are loaded at one time.

I have tried all the onClick examples I could find and none seem to work with the id call.

Any ideas as to what needs to change in the code to get the results I am looking for?

Thanks for your time!

Answer 1

<input type="checkbox" onchange="doTrees()"/>
<script>
function doTrees()
{
    //Load Trees, what ever they are
}
</script>

Answer 2

You can try something like this on your HTML:

<input type="checkbox" name="selectTree" value="yourTree" />

and on your script use the value of the checkbox to dynamically load a tree:

var tree,
    selectURL,
    selectTree = $('[type="checkbox"][name="selectTree"]');

selectTree.on('change',function() {
    selectURL = $(this).val();
    tree = kmltree ({
        url: selectURL,
        element: $('#tree')
    });

    // use your tree
});